背景图占据padding的内容,可以使用background-clip在调整
background-color 使用的背景颜色。
background-image 使用的背景图像。
background-repeat 如何重复背景图像。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-position 背景图像的位置。
css3新增
background-size 背景图片的尺寸。可以指定背景图的大小,例如20% 60px;
background-origin 背景图片的定位区域。
background-clip 背景的绘制区域。
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
background: aquamarine
url(img.png)
no-repeat
scroll
center center / 50%
content-box content-box;
background-size 属性
一:length
该属性值是设置背景图像的宽度和高度的,第一个值是宽度,第二个值是设置高度的。如果只设置第一个值,那么第二个值会自动转换为 “auto”;
二:percentage
该属性是以父元素的百分比来设置图片的宽度和高度的,第一个值是宽度,第二个值是高度。如果只设置一个值,那么第二个值会被设置为 “auto”;
三:cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
四:contain
把图像扩展至最大尺寸,以使宽度和高度 完全适应内容区域。