CSS的background简写
发布于 分类 Html5
更新于 2017-07-11
11天前 有1个用户阅读过
background属性
在CSS2.1里，background属性的简写方式包含五种属性值，从CSS3开始，又增加了3个新的属性值，加起来一共8个。
CSS2.1
background-color 使用的背景颜色。
background-image 使用的背景图像。
background-repeat 如何重复背景图像。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-position 背景图像的位置。CSS3
background-size 背景图片的尺寸。
background-origin 背景图片的定位区域。
background-clip 背景的绘制区域。其中，
background-attachment 属性| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
| length | 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为"auto"。 |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为"auto"。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
| padding-box | 背景图像相对于内边距框来定位。 |
| border-box | 背景图像相对于边框盒来定位。 |
| content-box | 背景图像相对于内容框来定位。 |
| border-box | 背景被裁剪到边框盒。 |
| padding-box | 背景被裁剪到内边距框。 |
| content-box | 背景被裁剪到内容框。 |
background简写形式
background: [background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position]
/
[ background-size]
[background-origin]
[background-clip];需要注意的是里面的/，它和font以及border-radius里简写方式使用的/用法相似。/可以在支持这种写法的浏览器里在background-position后面接着写background-size。 除此之外，你也可以增加另外两个描述它的属性值： background-origin和 background-clip 示例用法
.example {
background: aquamarine
url(img.png)
no-repeat
scroll
center center / 50%
content-box content-box;
}-- The End --