在CSS中有多个属性用于设置背景样式,其中
background-color:设置背景颜色。
background-image:指定使用的背景图片
background-repeat:设置是否以及如何重复背景图像
background-position:设置背景图像的起始位置
background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动
我们可以分别使用以上单个属性,但通常建议使用background简写属性,这在较老的浏览器中有更好的支持,更加简洁。
background : background-color background-image background-repeat background-attachment background-position
在使用background简写背景属性时,可以按照上面的顺序依次设置各个属性,也可以不设其中某些值,css会自动设置其默认值。
CSS3中新增的背景属性:
1.background -clip:规定背景的绘制区域。
属性值:1)border-box:背景被裁剪到边框盒
2)padding-box:背景被裁剪到内边距框
3)content-box:背景被裁剪到内容框
2.background-origin:规定 background-position 属性相对于什么位置来定位。
属性值:1)border-box:背景图像相对于边框盒来定位。
2)padding-box:背景图像相对于内边距框来定位。
3)content-box:背景图像相对于内容框来定位。
3background-size:规定背景图像的尺寸。
属性值:1)length:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"
2)percentage:以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
3)cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
4)contain:把图像图像扩展至最大尺寸,以使其宽度或高度完全适应内容区域。