Css3——background属性详解

Css3——background属性详解
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:url(img/tuoxie.jpg) 50% center/500px 200px no-repeat ,url(img/border.png) 75% center/260px 171px no-repeat ,url(img/border.png) 90% 68%/200px no-repeat , url(img/sky.jpg) 10% top/cover  no-repeat;
                padding: 15px;

/*背景简写：颜色、路径、平铺、背景滚动、定位左边20%右边100px、/背景宽度背景高度、裁剪clip、中心点origin*/
            /*background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-clip] [background-origin] ;*/
            background:#666 url(img/tuoxie.jpg) repeat-x fixed 20% 100px/500px 200px  padding-box content-box;

常用写法：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：背景图像相对于浏览器窗口不动，内容滚动的时候背景图像不动

inherit:继承父元素
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

background-clip: 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这几个常用的属性即可。

div设置多个背景

.div5{
            width:1000px;
            height:600px;
            background:url(img/tuoxie.jpg) 50% center no-repeat ,url(img/border.png) 20% center no-repeat ,url(img/border.png) 20% center no-repeat , url(img/sky.jpg) left top  no-repeat;
            background-size:200px,1000px;

              /*  background-position: left bottom, left top;
                background-repeat: no-repeat, repeat;*/

                padding: 15px;
        }