CSS背景属性
基本属性
background-color
: 默认值为transparent
,可以以"颜色名"、"rgb(css3新增rgba)"、"hls(css3中新增hlsa)"、"十六进制"的方式设置颜色值background-image
: none(默认) || url()background-repeat
: repeat(默认) || repeat-x || repeat-y || no-repeat background-attachment
: scroll(默认) || fixed
注意:background-attachment
取值为fixed
时,需要运用在html或body标签上。使用在其他标签上没有固定效果。
background-position
:水平位置 垂直位置
说明:一般来说,背景图片的左上角是和元素的左上角对齐的,background-position这一属性可以改变背景图片与元素的对齐点。
先来看看水平位移和垂直位移单位都是px的时候:
background-position: 30px 50px
以元素左上角为坐标原点,水平向右延展方向为x轴正轴,垂直向下延展方向为y轴正轴。那么此时图片的左上角与元素的(30,50)坐标点对齐。
现在来看百分比的情况:
计算方式为:
水平偏移x:(元素宽度-图片宽度)*百分比
垂直偏移y:(元素高度-图片高度)*百分比
此时同样的,图片左上角跟计算出的元素的(x,y)坐标点对齐。
当然啦。实际做项目的时候我们不会这么麻烦的去计算,这里只是总结一下它的计算方式。
实际项目中只需要记住:
1、背景图片水平垂直居中:
background-position: center
2、雪碧图情况:
原理跟使用px的情况相似,这里不赘述了。可以去看看这篇文章:Click here
css3新增属性
background-origin: 指定绘制背景图片的起点
background-clip: 指定背景图片的显示范围
background-size: 指定背景图片的尺寸大小(很常用)
background-break: 指定内联元素的背景图片进行平铺时的循环方式
CSS3 background-origin
该属性主要用来决定背景图片与元素对其原点的参考点。默认是以元素左上角为坐标原点进行对其,这一属性可以打破这一格局。
background-origin
有三个属性:padding-box
:默认值。表明图片的原点和元素padding外边缘(border的内边缘)进行对齐。border-box
:表明图片的原点和元素border的外边缘进行对齐。content-box
:表明图片的原点和元素content外边缘(padding的内边缘)进行对齐。
浏览器兼容性:
现代浏览器都支持和ie9+。但是使用时还需要加上浏览器前缀。
如下:
/*old Webkit and Gecko*/
-moz-background-origin: padding || border|| content;
-webkit-background-origin: padding || border|| content;
/*new Webkit and Gecko*/
-moz-background-origin: padding-box || border-box || content-box;
-webkit-background-origin: padding-box || border-box || content-box;
background-origin: padding-box || border-box || content-box; /*w3c标准*/
例子:
1、padding-box
2、border-box
3、content-box
CSS3 background-clip
该属性用来定义背景图片的裁剪区域。这样说得会比较抽象,稍后会通过实例为大家说明。
属性:
border-box: 背景图片在边框下(边框外边缘,不会超出边框),默认值
padding-box: 背景延伸到padding的外边缘,但不会超出边框范围(默认)
content-box: 背景仅在内容区描绘,不会超过padding和边框范围
是不是觉得似曾相识呢?没错,就是background-origin
刚刚提到的三个属性。
浏览器兼容性:
在Gecko内核浏览器(FF3.6-)不支持content-box,并且使用border和padding来代替标准语法中的border-box和padding-box
safari5能够在标准属性中支持border-box和padding-box,但content-box属性值也需要加上-webkit-前缀
我们先来看看默认情况下如果背景图片超出了元素的范围,元素会对背景图片进行怎样的裁剪。
测试图片200宽200高。
-
repeat:
/代码:/
.box {width: 260px;height: 150px; border: 10px dashed lightgreen; background-color:slateblue; background-image: url(img/test.jpg); background-repeat: repeat;
}
效果: -
no-repeat:
/代码:/
.box {background-repeat: repeat;
}
效果:
默认情况下:
背景平铺时会填满整个元素,包括border的范围。此时border-color
完全在background-image
下,而且background-image
从元素边框左上角起到元素边框右下角止。但background-position
的起始点却是从元素的内部补白(padding)外边缘开始。
背景不平铺时border-color从元素边框左上角起到元素边框的右下角边缘止,background-image
从内容补白(padding)外边缘的左上角起到元素边框的右下角止。
现在使用background-clip
属性可以改变背景图片的填充范围。
默认情况下,
background-clip
为border-box
。background-clip
为padding-box
时:背景图片的填充范围为,元素padding外边缘左上角到元素padding外边缘右下角。注意此时背景颜色的填充范围也会改变。
平铺时:
不平铺:
background-clip
为content-box
时:背景图片的填充范围为,元素padding内边缘左上角到元素padding内边缘右下角。注意此时背景颜色的填充范围也会改变。
平铺时:
不平铺:
CSS3 background-size
现在来看一个用得相对比较多的属性。background-size
属性可以用来指定背景图片的尺寸,可以控制背景图片在水平和垂直两个方向上的缩放,也可以控制图片拉伸覆盖背景区域的方式。背景图片能够自适应元素盒子的大小。
属性:
background-size: auto || <length> || <percentage> || cover || contain
auto: 默认值。将保持背景的原始高度和宽度。
<length>: 取具体的整体值(如px),将以设定的宽高值对背景图片进行缩放。
<pencentage>: 取值为百分值,可以是0% ~
100%。注意这个值是对于元素的宽度进行计算的,计算出来的宽高值再作为背景图片的宽高值对背景图片进行缩放。cover: 将背景图片宽度或者高度放大,以使图片宽高能适应铺满容器宽高较大的一方,但不同于
background-cover:100% 100%
的方式。
1、宽度为100,高度为250
2、宽度为250,高度为100
3、宽度为80,高度为100
contain:保持背景图像本身的宽高比例,将背景图像缩放到宽度或高度正好适应所定义背景容器的区域。
当background-size只取一个值时,另一个值自动设为auto。
浏览器兼容性:
ie9+以及其他主流。老版本浏览器需要加上前缀。
background-size的其他适用场合:
在流体布局或者响应式布局中,确保背景图像能始终适配容器大小。
对于平铺的重复性背景图像,确保背景图像不会有截断效果。
解决Retina屏幕双倍像素下背景图像模糊问题。(将大图缩小一倍)
使用链接或者列表元素的背景图像能和文本一起进行缩放。
其他新增CSS3背景属性
因为这两个属性浏览器兼容性比较差,项目中使用较少,所以这里不进行具体总结了。收集了一些相关的文章供有兴趣的小伙伴进行阅读。
1、内联元素背景图像平铺循环方式:暂无文章
2、CSS3多背景:Click here