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：

content-box:

个人总结：可以这样理解：在background-position起始位置从哪种原点位置开始显示背景图片！
例如：在background-position属性决定图片的位置后（例如定位在left top位置），显示的原点background-origin是默认padding-box，还是更改为border-box或content-box原点！一个是图片的起始位置，一个是原点参考位置！

同时，从图片也可以看出一个细节：背景颜色填充在边框下面，元素的背景图片默认从padding左上角开始到元素边框右下角止。

3.CSS3背景裁切属性:background-clip

background-clip:border-box||padding-box||content-box;//默认border-box,即超出border外边缘开始裁切！
//额，此属性在个别浏览器下兼容性写法需要注意！

效果图：默认border-box，无特殊效果！（背景色都会被裁剪掉！）

background-clip:padding-box效果，裁剪padding以外的区域

background-clip:contentg-box效果，裁剪content以外的区域

background-clip:text属性，Webkit私有属性!

//webkit内核的两个私有属性相互配合，实现背景图片填充文本的效果！

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

效果图：

注意：只有Webkit浏览器支持！

实例1：仿字体加载特效

.box{ width:600px;height:200px;border:1px solid #000; /*字体颜色需要透明*/ color:rgba(0,0,0,0); font:bold 120px/150px "Miscorsoft Yahei"; background:-webkit-linear-gradient(90deg,red 0,blue 100%) ; -webkit-background-clip:text; transition:all 1s; }
        .box:hover{ background-position: 0 -200px ; }

实例2：仿iphone开机动画

body{ background:#000; text-align:center; font:50px/200px "微软雅黑";}
h1{ display:inline-block; color:rgba(255,255,255,0.3); background:-webkit-linear-gradient(-30deg, rgba(255,255,255,0) 100px, rgba(255,255,255,1) 180px, rgba(255,255,255,1) 240px, rgba(255,255,255,0) 300px) -300px 0 no-repeat; -webkit-background-clip:text; -webkit-animation:toMove 2s linear infinite; }
@-webkit-keyframes toMove{
    0%{ background-position: -300px 0; }
    100%{ background-position: 600px 0; }
}

4.CSS3背景尺寸属性：background-size

background-size:auto||<length>||<perentage>||cover||contain;

属性值详解：

• percentage：百分比，可以改变背景图片的大小，但是！是相对于元素的宽度来计算，而不是相对于背景图片的宽度来进行计算。
• cover：放大背景图片，铺满整个容器。但是！图片可能会失真。
• contain：保持背景图片本身的宽高比例，将背景图片缩放到宽度或高度正好适应所有定义背景容器的区域。

应用场景:

• 流体布局或响应式布局中，结合媒体查询制作全屏背景图，适配终端；
• 在平铺的重复性背景图片中，确保背景图片不会被截断；
• 解决Retina屏幕双倍像素下背景图片模糊问题；
• 使用链接或列表元素的背景图片能和文本一起进行缩放…

5.CSS3内联元素背景图片平铺循环方式：

background-break:bounding-box||each-box||continuous;

注意：此属性目前仅属于Firefox，其属性要写成”-moz-background-inline-policy。

属性详解：

• bounding-box：背景图片在整个内联元素中进行平铺；
• each-box：背景图片在行内中进行平铺；
• continuous：下一行背景图片紧接着上一行中的图片进行继续平铺。

6.CSS3多背景

所有的这些背景属性都可以合并成单独的一行缩写。多背景图的缩写规则与单背景图是一致的，然后中间用逗号隔开。

background:
        url (01.jpg) no-repeat,    /*图片1*/
        url (02.jpg) repeat left center,    /*图片2*/
        url (03.jpg) repeat-y right top;   /*图片3*/
background-color:#ccc;//多背景情况下只能有一个背景色设置！

每个背景图片都是以层的形式显示，第一个在其他之上。先声明的图片在上面！

background-color只能设置一个，如果设置多个background-color会导致错误！

多背景模块知识还有很多很巧妙的用法和其详细使用方法以及应注意的事项，一言难尽：

css3多重背景详解： http://caibaojian.com/css3-multiple-background.html