CSS3 背景

2017-01-14 本文已影响12人越IT

知识点：

CSS3 背景图像区域
CSS3 背景图像定位
CSS3 背景图像大小
CSS3 多重背景图像
CSS3 背景属性整合

一、CSS3 背景图像区域

background-clip属性指定背景绘制区域

【语法】

background-clip: border-box|padding-box|content-box;

border-box:背景被裁剪到边框盒
padding-box:背景被裁剪到内边距框
content-box：背景被裁剪到内容框

【兼容性】
IE9+、FireFox、Chrome、Safari、Opera

background-origin属性指定background-position属性应该是相对位置
【语法】

background-origin: padding-box|border-box|content-box;

background-origin 设置元素背景图片的原始起始位置
定义背景图片位置，两个值：水平和垂直偏移量

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

【兼容性】
IE9+、FireFox4+、Chrome、Safari5+、Opera

background-size属性指定背景图片大小

【语法】

background-size: length|percentage|cover|contain;

属性值（percentage百分比）：0%~100%之间的任何值
第二个值可有可无，如没有默认为auto
当只设置第一个值时，第二个值根据图片宽度值来等比缩放
当两个值都有，按设置值大小显示图片

cover:即将背景图片等比例缩放以填满整个容器
contain：即将背景图片等比例缩放至某一边紧贴容器边缘为止

【兼容性】
IE9+、FireFox4+、Chrome、Safari5+、Opera

CSS3 允许您为元素使用多个背景图像
【语法】

background-image: url(img1.jpg), url(img2.png);

元素引用多个背景图片，前面图片依此覆盖后面图。

背景缩写属性可以在一个声明中设置所有的背景属性
【语法】

background: color position size repeat origin clip attachment image;