background：背景。在css里面作为css属性一成员，通过该属性可设置背景图片、背景颜色、背景图片截取等样式。而仅仅一个background又具有多个子属性。
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-size（CSS3新增）
- background-origin（CSS3新增）
- background-clip（CSS3新增）
background 简写属性可以在一个声明中设置以上的多个的背景属性。
常用写法：background:背景颜色 背景图片 背景平铺 背景滚动 背景位置
当然了，如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('a.png'); 也是允许的。
下面就来将这7个子属性详细的介绍一下。
1. background-color
颜色名称，如：background-color:red;
十六进制背景色，如：background-color:#f00;;
rgb颜色，这里如果是rgba，a表示透明程度，为0全透明，为1为完全不透明，
如：background-color:rgb(255,0,0.3);;
特殊值：transparent，透明色：background-color:transparent;
2. background-image
background-image属性用于为一个元素设置一个或多个背景图片，多个背景图片之间以逗号隔开。
一张图片：background-image: url(img/a.jpg);
多张图片：background-image: url(img/a.jpg),url(img/b.jpg);
特殊值：none，不显示背景图像
background-image: none;
3. background-repeat
background-repeat属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
常用的4个值：
repeat：水平和垂直方向都重复图像，background-repeat: repeat;
repeat-x：水平方向重复图像
repeat-y：垂直方向重复图像
no-repeat：图像不重复
4. background-attachment
规定背景图像是否固定或者随着页面的其余部分滚动。
scroll：背景图像相对于页面不动，会随着网页的滚动而移动，默认
fixed：背景图像相对于浏览器窗口不动，内容滚动的时候背景图像不动
background-attachment: fixed;
5. background-position
第一个值为横坐标，第二个值为纵坐标。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。
例如：background-position: right；代表背景图右侧，垂直方向居中的位置。
百分比位置，如：background-position: 20% 20%;
具体像素位置， 如：background-position: 20px 20px;
6.background-size
background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
语法
单张图片的背景大小可以使用以下三种方法中的一种来规定：
- 使用关键词
[contain] - 使用关键词
[cover] - 设定宽度和高度值
当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:
- 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为
[auto] - 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。
每个值可以是<length>, 是 <percentage>, 或者 [auto]。
示例：
background-size: contain;
background-size: 50%;
background-size: 3em;
background-size: auto 1em;
background-size: 50% 25%;
为了设定超过一张以上的图片尺寸时，需要提供多项数值，它们通过逗号分隔。
background-size: 50% 25%, contain, 3em;
属性值
<div id="box"></div>
CSS部分 背景图片分辨率为427*640
#box {
background-image: url(/media/examples/hand.jpg);
width: 100%;
height: 100%;
}
分别给box的background-size属性添加不同的属性值，会产生不同的效果。
1、长度：可以用px、em、rem等指定背景图片大小，不能为负值。
2、百分比：指定背景图片相对背景区（参照盒子的宽高）的百分比。背景区由[
background-origin] 设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果[attachment]为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。
3、auto
以背景图片的比例缩放背景图片。
4、cover
设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
5、contain
设置为contain，会自动调整缩放比例，保证图片始终完整显示在背景区域。背景区可能出现部分空白。当背景图和容器的大小的不同时，容器的空白区域会显示由 background-color 设置的背景颜色。
例如：第二张图所示当背景颜色设置为黄色时，且图片不平铺时，空白区域会显示为黄色。
注：图像刚好完全显示，一般不能覆盖全部背景区。
7.background-clip
background-clip 裁剪，通常和background-origin一起使用，决定设置元素的背景（背景图片或颜色）是否显示。
注：background-clip只是将背景和背景色粗暴的裁剪。
该属性有四个值
border-box
背景延伸至边框外沿（但是在边框下层）。background-origin: border-box;
padding-box
背景延伸至内边距(padding）外沿。不会绘制到边框处。
content-box
背景被裁剪至内容区（content box）外沿。
text
背景被裁剪成文字的前景色。
这个属性只有在边框
border被设置为非固实（soild）、透明或半透明时才能看到视觉效果，否则，本属性产生的样式变化会被边框覆盖。
8.background-origin
background-origin 规定了指定背景图片[background-image] 属性的原点位置的背景相对区域.
border-box
背景图片的摆放以border区域为参考
padding-box
背景图片的摆放以padding区域为参考
content-box
背景图片的摆放以content区域为参考
background-origin与background-clip的区别
origin.png
样式：
先看一下background-origin属性。
.bg{
width: 100px;
height: 100px;
padding:50px;
border: 10px dashed #000000;
background: #ffff00 url('pic1.gif') no-repeat;
margin-top: 10px;
display: inline-block;
}
.bg_origin_border{
background-origin: border-box;
}
.bg_origin_padding{
background-origin: padding-box;
}
.bg_origin_content{
background-origin: content-box;
}
先看一下background-clip属性。
clip.png
.bg_clip_border{
background-clip: border-box;
}
.bg_clip_content{
background-clip: content-box;
}
.bg_clip_padding{
background-clip: padding-box;
}
这就印证了background-clip只是将背景和背景色粗暴的裁剪。
好的，以上就是我对background的各个属性的理解，实际应用时可能会有部分出入，我们只需要掌握background-color、background-image、background-repeat、background-position、background-size这几个常用的属性即可。
欢迎大家一起交流，讨论。
网友评论