css 背景 background

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

　　background我们一般用到的的属性有：

background-attachment：背景（图片）是否随页面滚动；
background-origin：背景（图片）的位置的原点（图片位置从哪开始）;
background-color：背景颜色；
background-image：背景图片；
background-clip：背景（图片和背景色）的可视区域（有一部分被裁剪掉）；
background-position：背景（图片）的位置；
background-size：背景（图片）大小；
background-repeat：是否重复背景图片；

　　这些属性可以全部合并成一个缩写格式，background : attachment origin color image clip position/size repeat ；

　　background 缩写谨记：

如果同时设置 background-position 和 background-size，那么它们要连着一起写，并用"/"隔开，前面的是 background-position，后面的是 background-size；
如果你只想设置 background-size，不设置 background-position，方法就是写成 0 0 / size ，是两个 0；如果只写了一个 0，那么垂直位置默认为 center。如果两个 0 都不写，那么浏览器就会把 background-size 值当成 background-position 值，然后就没有 background-size 值了。
background-clip 默认是 border-box，background-origin 默认是 padding-box；都可设置 border-box | padding-box | content-box；当缩写中只出现一个值时，background-clip 和 background-origin 都会变成这个值；如果设置了两个不同的值，那么前者是 background-origin（位置原点），后者是 background-clip（图片裁剪）。

　　背景颜色 background-color 默认是占据 padding 和 border 区域的，不占 margin；

　　背景图片 background-image 默认位置是从 padding 开始，不占 border；在 IE6/7，background 没有占据 border；

    .wrapper {

      width: 200px;

      height: 80px;

      margin: 100px;

      padding: 30px;

      border: 10px dashed #0ff;

      background: #f60;

    }

background-attachment

　　页面滚动时，图片的状态，默认 scroll，跟随页面一起滚动。

background-attachment:scroll; 默认值，跟随页面滚动。
background-attachment:fixed; background-position 相对浏览器固定，不随页面滚动。

　　首先我们需要了解页面（page）和视口（view port）的概念，视口（view port）是浏览器显示网页的部分，位置固定，不会动。

　　当向下滚动页面时，视口（view port）不动，页面向上滚动。看起来像是视口（view port）向下滚动，这是默认值scroll的效果。

　　但是当 background-attachment 设置 fixed，页面滚动时，背景要待在它原来的位置（background-position 相对于浏览器），也就是不随元素滚动。

　　重点是背景图只出现在元素可见的区域，如果它的元素看不见了，背景图也消失；当我们向上或向下滚动页面时，只要元素还能在视口（view port）看到，哪怕一点点，只有1px，背景图都还会显示。我们可以利用这个属性做出视差滚动的效果。

background-origin

　　背景（图片）的位置的参考区域，可以改变原点（背景图片位置从哪开始计算），这个属性和 background-position 配合使用。

　　background-origin 默认为 padding-box，可设置为 border-box | padding-box | content-box。

　　仔细看 background-position：0 0; 的位置。

默认 padding-box:
border-box:
content-box:

    .wrapper {

      width: 100px;

      height: 100px;

      margin: 100px;

      padding: 30px;

      border: 10px dashed #f60;

      background: #0f0 url(images/1.jpg) no-repeat 0 0/100px padding-box padding-box;

      /*clip默认都是border-box;可设置border-box | padding-box | content-box*/

      /*origin默认是padding-box;可设置border-box | padding-box | content-box*/

      /*如果缩写中只出现一个值时，clip和origin都会变成这个值*/

      /*如果设置了两个不同的值，那么前者是origin（位置原点），后者是clip（图片裁剪）*/

      /*仔细看position：0 0 的位置哦*/

    }

background-color

　　有多种方式设置颜色：

red，green，....
rgba(0,0,0,0.6)；最后一个 0.6 是不透明度的意思，数值为0到1之间，0为全透明，1为不透明
#ff0033；可以写成 #f03
也可以设置 transparent，透明

background-image

　　background-image:url(images/pic.jpg); 注意路径要写对。

　　可以和 background-color 连用，如果图片不重复的话，图片没有占据的地方将被颜色占据。

多重背景

　　css3 中，可以对一个元素应用多个图片作为背景，代码用逗号隔开；第一个出现在元素顶部，后面的按顺序排列；

    .wrapper {

      width: 300px;

      height: 200px;

      margin: 100px;

      padding: 30px;

      border: 10px dashed #0ff;

      background: url(images/1.jpg) 80% 40%/150px 200px no-repeat, url(images/xiaoxin.gif) 20px bottom/ 100px no-repeat;

      /*一个元素可以设置多个图片同时作为背景，中间用逗号隔开*/

      /*如果同时设置position和size，那么它们要连着一起写，并用"/"隔开，前面的是position，后面的是size*/

      /*如果background-size可以设2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放*/

      background-color: #f60;

      /*这个时候如果还想要背景色，就必须单独设置了*/

    }

background-clip 和 background-origin

　　背景（图片和背景色）的可视区域（有一部分看不见，被裁剪掉了）；

　　background-clip 默认是 border-box，可设置 padding-box | content-box；

　　background-origin 默认是 padding-box;

默认border-box:
padding-box:
content-box

    .wrapper {

      width: 100px;

      height: 100px;

      margin: 100px;

      padding: 30px;

      border: 10px dashed #f60;

      background: #0f0 url(images/1.jpg) no-repeat 0 0/100px padding-box padding-box;

      /*clip默认都是border-box;可设置border-box | padding-box | content-box*/

      /*origin默认是padding-box;可设置border-box | padding-box | content-box*/

      /*如果缩写中只出现一个值时，clip和origin都会变成这个值*/

      /*如果设置了两个不同的值，那么前者是origin（位置基值），后者是clip（图片裁剪）*/

      /*仔细看position：0 0 的位置哦*/

    }

background-position

　　背景图片的位置，指的是图片左上角相对于原点（元素左上角）的位置；

　　如果 background-origin 是默认值，那么原点位置是在 padiing 左上角；

　　可以设置1或2个值，分别是水平位置和垂直位置，如果只有一个值，第二个值默认为 "center"；

background-position:0 0 ; 默认值，原点，元素左上角；
background-position:30px -50px; 向右和向下时正值，向左和向上是负值；
background-position:left bottom; 可以设置 left/center/right，top/center/bottom；
background-position:60% 10%; 将图片百分比位置的点和元素百分比位置的点对齐；

    .wrapper {

      width: 300px;

      height: 200px;

      margin: 100px;

      padding: 30px;

      border: 10px dashed #0ff;

      /*如果background-origin是默认值，那么position原点位置是在padiing左上角*/

      background: #f60 url(images/1.jpg) 80% 35px/150px no-repeat;

      /*如果同时设置position和size，那么它们要连着一起写，并用"/"隔开，前面的是position，后面的是size*/

      /*background-position可以设1或2个值，前者是水平位置，后者是垂直位置；如果只写了一个，那就是水平位置，垂直位置默认为center*/

      /*background-position当使用百分比的时候，将图片百分比位置的点和元素百分比位置的点对齐*/

      /*background-size可以设1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放*/

    }

background-size

　　背景图片的大小，可以设置：contain | cover | 百分比数值 | 单位数值

background-size：单位数值；可以设置1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放；

    .wrapper {

      width: 300px;

      height: 200px;

      margin: 100px;

      padding: 30px;

      border: 10px dashed #0ff;

      /*如果background-origin是默认值，那么position原点位置是在padiing左上角*/

      background: #f60 url(images/1.jpg) 80% 35px/150px no-repeat;

      /*如果同时设置position和size，那么它们要连着一起写，并用"/"隔开，前面的是position，后面的是size*/

      /*background-position可以设1或2个值，前者是水平位置，后者是垂直位置；如果只写了一个，那就是水平位置，垂直位置默认为center*/

      /*background-position当使用百分比的时候，将图片百分比位置的点和元素百分比位置的点对齐*/

      /*background-size可以设1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放*/

      /*background-size当使用百分比数值的时候，是基于包含元素的尺寸的*/

    }

background-size：百分比数值；是基于包含元素的尺寸的；可以设置1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放；

    .wrapper {

      width: 300px;

      height: 200px;

      margin: 100px;

      padding: 30px;

      border: 10px dashed #0ff;

      /*如果background-origin是默认值，那么position原点位置是在padiing左上角*/

      background: #f60 url(images/1.jpg) 80% 35px/30% 60% no-repeat;

      /*如果同时设置position和size，那么它们要连着一起写，并用"/"隔开，前面的是position，后面的是size*/

      /*background-position可以设1或2个值，前者是水平位置，后者是垂直位置；如果只写了一个，那就是水平位置，垂直位置默认为center*/

      /*background-position当使用百分比的时候，将图片百分比位置的点和元素百分比位置的点对齐*/

      /*background-size可以设1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放*/

      /*background-size当使用百分比数值的时候，是基于包含元素的尺寸的*/

    }

background-size:contain；背景图等比缩放，将图片完全显示在背景区域内；因此，如果背景图宽高比例和元素宽高比例不一致，那么可能会有一部分背景区域留白；

　　　　注意看边框区域

    .wrapper {

      width: 250px;

      height: 200px;

      margin: 100px;

      padding: 30px;

      border: 10px dashed #0ff;

      /*如果background-origin是默认值，那么position原点位置是在padiing左上角*/

      background: #f60 url(images/1.jpg) center/contain no-repeat;

      /*如果同时设置position和size，那么它们要连着一起写，并用"/"隔开，前面的是position，后面的是size*/

      /*background-position可以设1或2个值，前者是水平位置，后者是垂直位置；如果只写了一个，那就是水平位置，垂直位置默认为center*/

      /*background-position当使用百分比的时候，将图片百分比位置的点和元素百分比位置的点对齐*/

      /*background-size可以设1或2个值，前者是宽度，后者是高度；如果只写了一个，那就是宽度值，高度值是等比缩放*/

      /*background-size当使用百分比数值的时候，是基于包含元素的尺寸的*/

      /*background-size:contain; 背景图等比缩放，将图片完全显示在背景区域内；因此，如果背景图宽高比例和元素宽高比例不一致，那么可能会有一部分背景区域留白*/

      /*background-size:cover; 背景图等比缩放，铺满整个背景区域，宽度或者高度超过背景区域大小；因此，如果背景图宽高比例和元素宽高比例不一致，那么可能会有一部分不在背景区域内（被剪切掉了）*/

    }

background-size:cover；背景图等比缩放，铺满整个背景区域，宽度或者高度超过背景区域大小；因此，如果背景图宽高比例和元素宽高比例不一致，那么可能会有一部分不在背景区域内（被剪切掉了）；