一、背景切割
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的背景是从图片的下边和右边开始平铺的。
比如：
使用的背景图 bac.jpg
当背景no-repeat的时候：
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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: padding-box;*/
/*background-clip: content-box;*/
}
</style>
</head>
<body>
<div class="div1">过后覅计划公交窖口换IP感觉</div>
</body>
</html>
效果一：
当背景repeat的时候：
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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: padding-box;*/
/*background-clip: content-box;*/
}
</style>
</head>
<body>
<div class="div1">过后覅计划公交窖口换IP感觉</div>
</body>
</html>
效果二：
二、背景原点
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 就像一对好基友，一般都配合使用。
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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: padding-box;*/
/*background-clip: content-box;*/
background-origin: border-box;
}
</style>
</head>
<body>
<div class="div1">过后覅计划公交窖口换IP感觉</div>
</body>
</html>
效果：
background-clip和background-origin的区别:
background-clip是用来设置div（元素）中背景（包括背景色和背景图）的起始位置，而background-origin是截取的背景图的起始位置。
当有background-origin: content-box的时候：
没有background-origin: content-box的时候：
从以上两张图可以明显看到截取的背景图位置不一样，当没有background-origin是背景图默认是从padding-top和padding-left截取的，当有background-origin，背景图截取的位置是有background-origin来决定的。
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
三、背景尺寸
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;
例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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:400px 400px;*/
/*background-size:100% 100%;*/
/*background-size:auto;*/
background-size:cover;
/*background-size:contain;*/
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
效果：
四、透明背景
background:rgba(255,0,0,0.6)
接受四参数，前3个为颜色参数范围0-255，最后一个为透明度范围0-1，数值越到透明度越小。
例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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>
</head>
<body>
<div>会后集合与交通</div>
</body>
</html>
效果：
五、渐变背景
线性渐变：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));
线性渐变例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
height: 100px;
width: 100px;
background: -webkit-gradient(linear,left center,right center,from(yellow),color-stop(0.5,black),color-stop(0.5,#fff),to(blue));
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
关于gradient的前缀：
-webkit-:苹果、谷歌
-ms-：ie
-moz-:火狐
-o-:欧朋
径向渐变例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
height: 100px;
width: 100px;
border-radius: 50px;
background: -webkit-gradient(radial,30 30,1,30 30,100,from(#fff),color-stop(0.3,yellow),to(blue));
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：