背景图像区域

background-clip 属性

指定背景绘制区域

语法

background-clip：border-box | padding-box | content-box

• border-box：背景被裁剪到边框盒

• padding-box：背景被裁剪到内边距框

• content-box：背景被裁剪到内容框

background-origin 属性

设置元素背景图片的原始起始位置

语法

background-origin：padding-box | border-box | content-box

background-size 属性

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

语法

background-size：length | percentage | cover | contain

• cover：将背景图片等比缩放以填满整个容器

• contain：将背景图片等比缩放至某一边紧贴容器边缘为止

注意：

1. 若只设置第一个值时，第二个值根据图片宽度值来等比缩放

2. 当两个值都有，按设置值大小显示图片

多重背景图像

概念

CSS3 允许你为元素使用多个背景图像

语法

background-image：url(img1.jpg), url(img2.jpg)

CSS3 背景属性整合（不建议这样写）

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

语法

background：color: color position size repeat origin clip attachment image;