CSS3背景

欢迎访问的我的个人博客http://liubofeng.com/

CSS3 背景图像区域

background-clip 属性

background-clip属性指定背景绘制区域
语法
background-clip: border-box|padding-box|content-box;
兼容性
IE9+、FireFox、Chrome、Safari、Opera

background-clip: border-box;//背景被裁剪到边框盒。
background-clip: padding-box;//背景被裁剪到内边距框。
background-clip: content-box;//背景被裁剪到内容框。

CSS3 背景图像定位

background-origin属性

background-origin属性指定background-position属性应该是相对位置
语法
background-origin: padding-box|border-box|content-box;
兼容性
IE9+、FireFox4+、Chrome、Safari5+、Opera

background-origin: border-box;//背景图像相对于内容框来定位。
background-origin: padding-box;//背景图像相对于内边距框来定位。
background-origin: content-box;//背景图像相对于边框盒来定位。

CSS3 背景图像大小

background-size属性

background-size属性指定背景图片大小
语法
background-size: length|percentage|cover|contain;
兼容性
IE9+、FireFox4+、Chrome、Safari5+、Opera

 background-size: contain;//把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
 background-size: cover;//把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
 background-size: 800px 500px;//宽800px,高800px
 background-size: 800px;//宽800px，高auto
 background-size: 50% 50%;//以父元素的百分比来设置背景图像的宽度和高度。宽为父元素的50%，高为父元素的50%
 background-size: 50%;//宽为父元素的50%，高为auto

CSS3 多重背景图像

CSS3 允许您为元素使用多个背景图像
语法
background-image: url(img1.jpg), url(img2.png);

CSS3 背景属性整合

背景缩写属性可以在一个声明中设置所有的背景属性
语法
background: color position size repeat origin clip attachment image;