HTML5学堂-码匠 HTML5学堂

您当前位于:移动端开发 ——> 移动端开发知识[系列] - 背景妙用,background-size背景尺寸等

移动端开发知识[系列] - 背景妙用,background-size背景尺寸等

2015/05/02 20:17:58 | 作者:HTML5学堂(码匠) | 分类:移动端开发 | 关键词:移动端,CSS3,背景尺寸,背景切割

移动端H5知识[系列] - 背景妙用

HTML5学堂:移动端开发中,背景图需要适应不同的屏幕设备大小。当然CSS3为我们提供了一系列非常不错的背景属性,本文讲解了CSS3背景的使用。

CSS3中增加的背景属性

1、background-clip设置背景切割

2、background-origin设置背景原点的起始位置

3、background-size设置背景尺寸。

4、rgba的背景颜色设置方法

5、linear-gradient与radial-gradient渐变背景

background-clip背景切割

clip原意为裁剪,截取。

background-clip的作用为将背景图片做适当的裁剪,以适应需要。根据设置的盒子部位,那么图片在这个部位的外边缘以外的部分都会不可见。

background-clip属性的取值

content-box:表示从内容区开始(width和height部分)

padding- box:表示从内边距区开始(padding部分)

border-box:表示从边框区开始(border部分)

欢迎沟通交流~HTML5学堂

background-origin 背景原点

origin意为原点,起始坐标位置,表示背景图的左上角点初始显示位置再哪里。属性值取值和background-clip相同,在此就不再重复书写了。 一定要注意,background-clip与background-origin不能混用~例如:背景图片起始位置是从border-box开始,但background-clip设置的值是content-box,在content之外,也就是border-box内,padding-box内的图片内容将统统不可见。尽管图片是从边框开始显示。

background-size 背景尺寸

对于背景图片的处理,通常使用background-size进行辅助,background-size: 100%,个人觉得这个是比较好用的属性。background-size需要两个值,它的类型可以是像素(px)、百分比(%)或是auto,还可以是cover和contain。第一个值为背景图的width,另外一个值用于指定背景图上的height,如果只设定1个值,则第2个默认为auto,但当值为cover和contain时除外。

之前一直用cover比较多(保持图像的宽高比例,将图片缩放到正好完全覆盖定义的背景区域,其中有一边和背景相同),今天来重点说一下百分比:当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定。特别注意一下,图片大小不是按背景图片大小的百分数来计算的,而是装载背景图的元素的百分比来计算。

应该说,背景尺寸这个新属性的出现,很好的解决了我们做移动端时遇到的分辨率兼容问题,所以,小伙伴儿们,好好琢磨琢磨background-size吧,肯定会有助于我们书写移动端代码的~~~

rgba的背景颜色设置方法

在此前,我们表示颜色的方法有三种,分别是rgb(值, 值, 值)、#6位16进制数、英文单词。rgba应该说是在原来rgb的书写方式上扩展了功能。r表示红色值,g表示绿色值、b表示蓝色值,而a表示的是透明度。前面三个值均需要使用整数,取值范围为0~255(含0和255),透明度a取值范围为0~1,是可以使用小数的,但是只能精确到两位小数,0表示的是完全透明,1表示的是完全不透明。如:rgba(255, 0, 0, 1)表示的就是完全不透明的纯红。

渐变背景

渐变,可以理解为由一个颜色变化到另一个颜色。在渐变属性的属性值中应当有起始变化位置、起始颜色、渐变的角度、变化到的百分比位置以及变化到的颜色。渐变分为两种,一种是线性渐变,另一种是径向渐变。当前在移动端基本很少用到渐变,除了其复杂的兼容性问题,还有就是渐变本身对移动端的性能存在一定的影响。加上当前设计风格偏向于扁平化,自然使用渐变的设计师也不多~在此也就不针对渐变背景进行详细讲解了,感兴趣研究的同学,可以百度搜索CSS3渐变在线生成工具~

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端