CSS 的 background 属性小结

background有8个属性控制，可以简写成一个

1.background-color

• background-color属性设置背景元素的 背景颜色，可以设置透明transparent

.jd_header{
 background: #0CBAFF;
}
.jd_search {
    background: yellow;
} 
.jd_box{
   background: transparent;
 border: 1px solid #ccc;
}

• 给透明背景颜色家一个边框方便查看

  
  background-color.jpg

2.background-image

• background-image 属性为元素定义一个（或多个）背景图片。它的值通常是用 url() 符号定义的图片 url。none 也是允许的，它会被当做空的一层。

   .jd_box{
            background: transparent;
            float: left;
            border: 1px solid #ccc;
            background-image: url("JD/images/nav0.png");
        }

image.png

3.background-repeat

• background-repeat 属性控制如何平铺背景图片,repeat-x、repeat-y、repeat、space、round、no-repeat。除了前两个（repeat-x 和 repeat-y）其他关键字可以写一次来同时定义 x 轴和 y 轴，或分开定义两个维度。

.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
.top-outer-right { background-repeat: space; }
 
.bottom-outer-left { background-repeat: round; }
.bottom-inner-left { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }

image.png

4.background-size

• background-size 属性定义背景图片的大小。它的值可以是一个关键字、一个长度或一个百分比。属性可用的关键字是 contain和 cover。

• contain 会按图片比例将其放大至宽和高完全适应区域

background-size: contain;

image.png

• cover会将图像调整至能够完全覆盖该区域的最小尺寸。

 background-size: cover;

image.png

• 设置图片的大小

 background-size: 100px 100px;

image.png

5.background-attachment

• background-attachment属性控制背景图片在可视区和元素中如何滚动
  • fixed 意思是背景图片相对于可视区固定,即使用户滚动可视区时也不移动
  • local 意思是背景在元素中位置固定。如果元素有滚动机制，背景图片会相对于顶端定位，当用户滚动元素时，背景图片会离开视野

  • scroll 意思是背景图片固定，不会随着元素内容滚动

    
    attachment.gif

6.background-position

• background-origin 属性，定义了背景图片起始位置。它的值可以是一个关键字、一个长度或一个百分比，我们可以依次定义 x 轴和 y 轴的位置。(有top、right、bottom、left 和 center关键字)也可以设置x,y轴上像素比如background-position: 20px 70px; 或者是百分比

7.background-origin

• background-origin背景图片根据盒模型的哪个区域来定位。

• border-box，图片相对于边框（Border）定位，

  
  image.png

• padding-box，图片相对于内边距框（Padding）定位

  
  image.png

• content-box，图片相对于内容框（Content）定位。

           padding: 20px;
           background-image: url("JD/images/banner_1.jpg");
            background-repeat: no-repeat;
            background-origin: content-box;

image.png

8. background-clip

• background-clip背景绘制区域，也就是背景可以被绘制的区域，基于盒模型 和 background-origin一样有border-box,padding-box,content-box3个属性