今天接着上文继续来跟大家说说background的其余的四种属性。
background-attachment
background-size *css3之后新增
background-origin *css3之后新增
background-clip *css3之后新增
background-attachment 设置背景图像是否固定或者随着页面的滚动效果
1.background-attachment：scroll 滚动(默认)
背景图像会随着页面滚动条的滚动而移动
width: 600px;
height: 500px;
background-image:url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
background-attachment:scroll;
背景会固定在原有的位置上，当下拉滚动条时，背景将会被遮挡。
2.background-attachment：fixed 固定
当页面的滚动条滚动时，背景图像不会移动
.div {
width: 600px;
height: 500px;
background-image: url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
background-attachment: fixed;
}
不管内容有多少，下拉滚动条时，文字内容会随着页面下拉移动，但背景图片会一直保持在当前位置(看上去好像是固定在当前)
background-size 设置背景图片的大小
1.background-size：auto 自动(保持图片的原大小尺寸)
.div {
width: 600px;
height: 500px;
border: 10px solid #333;
background-image: url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
background-size: auto;
}
背景图片没有盒子那么大，所以会自适应的将背景填满，但会出现多张
设置背景图片可以用多种单位进行设置，例%，em, px 和auto
当我们只传入1个参数时，第2个参数会默认为auto,例如：
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto
.div {
width: 600px;
height: 500px;
border: 10px solid #333;
background-image: url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
background-size: 400px;
}
当我们传两个值时：
第一个值指定图片的宽度，第二个值指定图片的高度
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
.div {
width: 600px;
height: 500px;
border: 10px solid #333;
background-image: url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
background-size: 50% 30em;
}
2.background-size: cover 覆盖(会将图片拉伸覆盖整个盒子)
.div {
width: 600px;
height: 500px;
border: 10px solid #333;
background-image: url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
background-size: cover;
}
为了可以让大家看的清除，我给盒子加了10px的边框
3.background-size: contain 单向延伸
(调整单方向伸缩时，另一方向保持不变,保持图片的长宽比例)
.div {
width: 600px;
height: 500px;
border: 10px solid #333;
background-image: url(./img/u=231008047,2570173687&fm=26&gp=0.jpg);
background-size: contain;
}
特殊情况，可同时设置多张背景图片的属性值，特殊情况时为大家示范。
background-origin 设置图片原点位置
1.background-origin：padding-box 内边距作为原点位置(默认值)
.div {
width: 500px;
height: 300px;
background-color: blue;
background-repeat: no-repeat;
border: 30px solid rgba(0,255,0,0.2);
padding: 30px;
background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
background-origin: padding-box;
}
padding-box(作为默认值)，从padding区域的左上角开始显示。
2.background-origin：border-box 边框作为原点位置
.div {
width: 500px;
height: 300px;
background-color: blue;
background-repeat: no-repeat;
border: 30px solid rgba(0,255,0,0.2);
padding: 30px;
background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
background-origin: border-box;
}
背景图像从 border 区域的左上角开始显示，当为边框设置透明度后，背景图像和边框相叠加，透过边框可以看见背景图像
3.background-origin：content-box 内容区域作为原点位置
.div {
width: 500px;
height: 300px;
background-color: blue;
background-repeat: no-repeat;
border: 30px solid rgba(0,255,0,0.5);
padding: 30px;
background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
background-origin: content-box;
}
背景图像从 content区域的左上角开始显示。
当内边距为0时，padding-box 与 content-box 的效果相同。
background-clip 图片的裁切方式
1.background-clip：border-box (默认值) 从边框位置开始向内裁切
border的区域也有背景图，但是背景图图片是从border-top和border-left的位置开始平铺的 (下面发两种情况，给大家进行一下对比)
.div {
width: 500px;
height: 300px;
background-color: blue;
background-repeat: no-repeat;
border: 30px solid rgba(0,255,0,0.3);
padding: 30px;
background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
background-clip: border-box;
}
只有当背景repeat的时候，border-top和border-left才是背景图，并且border-top的背景是从图片的下边开始平铺，border-left的背景是从图片的右边开始平铺。
.div {
width: 500px;
height: 300px;
background-color: blue;
/* background-repeat: no-repeat; */
border: 30px solid rgba(0,255,0,0.3);
padding: 30px;
background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
background-clip: border-box;
}
2.background-clip: padding-box 从内边距位置（包括padding-box区域）开始向内裁切
边框下面没有背景，背景延伸到内边距外沿
.div {
width: 500px;
height: 300px;
background-color: blue;
background-repeat: no-repeat;
border: 30px solid rgba(0,255,0,0.3);
padding: 30px;
background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
background-clip: padding-box;
}
3.background-clip: content-box 在中间内容（包括content-box区域）开始向内裁切
下图中背景图片的起始位置没有变化，但显示的位置从内边距开始(白色边框为内边距)，内边距覆盖的地方没有显示，进行了裁切。
.div {
width: 500px;
height: 300px;
background-color: blue;
background-repeat: no-repeat;
border: 30px solid rgba(0,255,0,0.3);
padding: 30px;
background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
background-clip: content-box;
}
4.background-clip: text 以文字的形式进行裁切
个人认为text是这个属性的重要 ‘人物’ ，终于要登场了
我们先看一个直接设置属性后的效果
.div {
width: 500px;
height: 300px;
background-repeat: content;
background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
background-clip: text;
font-size: 90px;
font-weight: bold;
}
好像看上去并没有什么不同，和我们平时在文字后面添加背景图片没区别，别着急让我们稍微修改一个属性
.div {
width: 500px;
height: 300px;
background-repeat: content;
background-image: url(./img/u=3824055283,515774918&fm=26&gp=0.jpg);
font-size: 90px;
font-weight: bold;
-webkit-background-clip: text;
color: transparent;
}
在这里将字体颜色变为透明色，给 background-clip: text; 添加了前缀-webkit-，瞬间就让CSS变得不那么枯燥了。
text，是chrome特有的属性，所以使用时需要加上前缀-webkit-,由于text的值在其它的浏览器不生效的情况下，为了兼容， 就需要用到color属性，为字体定义颜色。以便在其它浏览器中查看时不会显示的太过简单。
到这里background的基本属性都已经说完了，其实了解了这些属性后可以做很多的设置，而将某些属性进行搭配使用的话，会得到意想不到的的效果。
好了那么我们下一篇见吧，一起去看看background的复合属性的复合使用方法！