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

　　　注意看边框区域

　　

    .wrapper {
      width: 250px;
      height: 200px;
      margin: 100px;
      padding: 30px;
      border: 10px dashed #0ff;
      /*如果background-origin是默认值，那么position原点位置是在padiing左上角*/
      background: #f60 url(images/1.jpg) center/cover 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-repeat

　　设置背景图片时，默认把图片铺满整个元素空间。但有时候，我们不需要平铺，只需要图片出现一张，也有时候需要图片只往一个方向平铺；

• background-repeat:repeat;  默认值，铺满元素空间；
• background-repeat:no-repeat;  不平铺，图片只出现一张；
• background-repeat:repeat-x;  水平方向平铺；
• background-repeat:repeat-y;  垂直方向平铺；
• background-repeat:inherit;  继承父元素的 background-repeat 属性；