背景

一、背景切割

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

作用：为将背景图片做适当的裁剪，以适应需要。

默认格式 background-clip ：border-box，border的区域也有背景图，但是背景图图片是从border-top和border-left的位置开始平铺的，所以当背景图片no-repeat的时候，border-top和border-left的背景是背景色不是背景图，只有当背景repeat的时候，border-top和border-left才是背景图，并且border-top和border-left的背景是从图片的下边和右边开始平铺的。

当背景no-repeat的时候：

<style type="text/css">
 .div1{
 width: 300px;
 height: 300px;
 border:50px dashed green;
 font-size: 60px;
 color: #fff;
 padding: 30px;
 margin: 30px;
 background: #fff url(bac.jpg) 0 0 no-repeat;
 background-clip: border-box;

当背景repeat时

<style type="text/css">
 .div1{
 width: 300px;
 height: 300px;
 border:50px dashed green;
 font-size: 60px;
 color: #fff;
 padding: 30px;
 margin: 30px;
 background: #fff url(bac.jpg) 0 0 no-repeat;
 background-clip: border-box;

二、背景原点

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

作用：决定图片的原始起始位置

比如上面的效果二，背景图片大于divd的宽高，但是border-top和border-left的背景是背景色是拉伸的，如果想要整个div就是一张图而没有平铺效果，怎么办呢？这就要使用background-origin 的配合，把background-origin 设置成background-origin ：border-box即可。background-clip和background-origin 就像一对好基友，一般都配合使用。

<style type="text/css">
 .div1{
 width: 300px;
 height: 300px;
 border:50px dashed green;
 font-size: 60px;
 color: #fff;
 padding: 30px;
 margin: 30px;
 background: #fff url(bac.jpg) 0 0 no-repeat;
 background-clip: border-box;

background-clip和background-origin的区别:
background-clip是用来设置div（元素）中背景（包括背景色和背景图）的起始位置，而background-origin是截取的背景图的起始位置。


当没有background-origin是背景图默认是从padding-top和padding-left截取的，当有background-origin，背景图截取的位置是有background-origin来决定的。

<style type="text/css">
 .div1{
 width: 200px;
 height: 200px;
 border:50px dashed green;
 font-size: 60px;
 color: #fff;
 padding: 100px;
 margin: 30px;
 background: #f00 url(bac.jpg) 0 0 no-repeat;
 background-clip: content-box;
 background-origin: content-box; }

三、背景尺寸

background-size ：length/percentage/auto/cover/contain

作用：设置背景图的大小。

length： 长度值指定,代为px，接受两个数值如：background-size:400px 400px;，分别为宽、高，也可以设定一个数值，当只有一个数值是，背景长度为此数值，高度等比例伸缩。
percentage： 按背景图的百分比进行伸缩，也可以接受两个或者一个数值如：background-size:100% 100%;
auto： 真实大小如：background-size:auto;
cover：等比缩放到完全覆盖容器，背景图像有可能超出容器 如：background-size:cover;
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内如：background-size:contain;

<style type="text/css">
 .div1{
 width: 200px;
 height: 200px;
 border:50px dashed green;
 padding: 100px;
 margin: 30px;
 background: #000 url(bac.jpg) 0 0 no-repeat;
 background-size:cover;
</style>

四、透明背景

background:rgba(255,0,0,0.6)
接受四参数，前3个为颜色参数范围0-255，最后一个为透明度范围0-1，数值越到透明度越小。

<style type="text/css">
 body{
 color: #fff;
 background: #000; }
 div{
 color: #fff;
 font-size: 50px;
 font-weight: bold;
 background: rgba(255,255,255,0.5);
 position: absolute; }
</style>

五、渐变背景

线性渐变：linear-gradient
径向渐变： radial-gradient

background:-webkit-linear | radial-gradient (水平起点 垂直起点 角度, 颜色1 0%, 颜色2 渐变到的位置百分比%, ... ,颜色N 100%);
如：background: -webkit-gradient(linear,left center,right center,from(yellow),color-stop(0.5,black),color-stop(0.5,#fff),to(blue));

<style type="text/css">
 div{
 height: 100px;
 width: 100px;
 background: -webkit-gradient(linear,left center,right    center,from(yellow),color-stop(0.5,black),colorstop(0.5,#fff),to(blue)); }
 </style>

关于gradient的前缀：
-webkit-:苹果、谷歌
-ms-：ie
-moz-:火狐
-o-:欧朋