CSS的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:
[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; }
努力奔跑。。。。。