CSS3背景

本文简单整理了CSS3背景的几个知识点：背景的五大基本属性，以及新增的四个属性：background-origin、background-clip、background-size、background-break以及多背景简单使用!

1.CSS3背景属性总览：

1.1 背景的五个基本属性：

• background-color：背景颜色
• background-image：背景图片
• background-repeat：背景图片展示方式
• background-attachment：背景图片是固定还是滚动
• background-position：背景图片位置

以上五个基本属性可以简写为：(看例子比较清楚！)

background：#fff url(../images/bg.png) no-repeat fixed center;

注意： background-attachment取值为”fixe”时，一般运用在html或者body标签上，使用在其他标签上不能达到固定效果！

1.2 4个与背景相关的新增属性：

• background-origin：指定绘制背景图片的起点
• background-clip：背景图片的显示范围
• background-size：背景图片的尺寸大小
• background-break：内联元素的背景图片进行平铺时的循环方式

---

2.CSS3背景原点属性：background-origin

background-origin:padding||border||content;//旧语法

background-origin:padding-box||border-box||content-box;//新语法

属性值解析：

• padding-box(padding)：默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片；
• border-box(border):决定background-position起始位置从border的外边缘开始显示背景图片；
• content-box(content）:决定background-position起始位置从content的外边缘(padding的内边缘)开始显示背景图片。

注意：IE8一下版本background-origin默认值为border，背景图片background-position是从border开始显示背景图片。

看图最实在：(都是在background-position:left top情况下显示！)

padding-box默认值：

border-box&#x