CSS3背景

Mr.ZhaoAbout 2 min

1. background-origin

作用：设置背景图的原点

属性值：

  1. padding-box ：从 padding 区域开始显示背景图像—— 默认值
  2. border-box ： 从 border 区域开始显示背景图像
  3. content-box ： 从 content 区域开始显示背景图像

2. background-clip

作用：设置背景图的向外裁剪的区域

属性值：

  1. border-box ： 从 border 区域开始向外裁剪背景。 —— 默认值
  2. padding-box ： 从 padding 区域开始向外裁剪背景
  3. content-box ： 从 content 区域开始向外裁剪背景
  4. text ：背景图只呈现在文字上（backgroun-clip 要加上 -webkit- 前缀）

3. background-size

作用：设置背景图的尺寸

属性值：

  1. 用长度值指定背景图片大小，不允许负值 background-size: 300px 200px;
  2. 用百分比指定背景图片大小，不允许负值 background-size: 100% 100%;
  3. auto：背景图片的真实大小。 —— 默认值
  4. contain：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片 background-size: contain;
  5. cover：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。—— 相对比较好的选择 background-size: cover;

4. background复合属性

语法：

background: color url repeat position / size origin clip

注意：

  1. origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如果设置了两个值，前面的是 origin ，后面的 clip
  2. size 的值必须写在 position 值的后面，并且用 / 分开

5. 多背景图

CSS3 允许元素设置多个背景图片

/* 添加多个背景图 */
background: url(../images/bg-lt.png) no-repeat,
url(../images/bg-rt.png) no-repeat right top, url(../images/bg-lb.png) no-repeat left bottom, url(../images/bg-rb.png) no-repeat right bottom;