css基础知识（1）———— background

1. 写了几年的页面经常会把一些不常用的css 属性方法给丢掉了，必须抽时间回顾下。

1) background-image:url(); 关于背景图片，可以是一张也可以是多张共同存在的背景图

demo:

html:  <div class="main"></div>

css:   

A) 图片共存

.main{
       width:400px;
 height:400px;
 background: 
       url(//m.elongstatic.com/frontend/activepage/spring/main/images/icon1.png) no-repeat,    

       //一定要用逗号隔开

       url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png)  no-repeat;
    }

B)图片覆盖

.main{
       width:400px;
 height:400px;
 background: 
       url(//m.elongstatic.com/frontend/activepage/spring/main/images/icon1.png),     //一定要用逗号隔开

       url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png);
}

C) 一个页面两张背景图

.main{
       width:400px;
 height:400px;
 background: 
 url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png) no-repeat ,

 url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui4.png) 0 150px no-repeat;

}

2）关于background-position

     background-position:0 0; 第一个值代表水平方向的偏移值，第二个值代表垂直方向的偏移值

3) background-size 图片尺寸大小

   可以是百分比，值或者cover,contain等,第一个值代表宽度第二个值代表高度

   background-size: 100% auto  |   background-size: 10px 10px; ｜ background-size: cover | background-size: contain

   background-size:  inherit|initial|unset 

   background-size:cover 与 background-size:contain 区别就是

   contain:把图片放大到图片本身最大，cover 拉伸覆盖到父级元素最大

   .main{
       width:300px;
 height:300px;
 border:1px solid #ddd;
 background: url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png) no-repeat ;
 background-size:contain;
}

  

.main{
       width:300px;
 height:300px;
 border:1px solid #ddd;
 background: url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png) no-repeat ;
 background-size:cover;
}

   

4) background-repeat: repeat | no-repeat | repeat-x | repeat-y | round | space

    这里重点写个round space

   space:图像会尽可能重复，但不会被裁剪，第一个跟最后一个会被固定在元素边缘上，同时空白会均匀分布在元素中间

   round:图像会被拉伸或者压缩 铺满整个父元素 

   .main{

 width:800px;

 height:300px;
 border:1px solid #ddd;
 background: url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png) space space ;

}

.main{
       width:800px;
 height:300px;
 border:1px solid #ddd;
 background: url(//m.elongstatic.com/frontend/activepage/spring/main/images/tehui3.png) round round ;
}

5) background-origin  背景图片相对于什么位置来定位

   background-orign: padding-box 背景图片以padding 位置为参考定位

   background-origin: border-box 背景图片以border区域为参考定位

   background-origin : content-box 背景图片以内容区域为参考定位

   

      

  

6) background-clip 设置元素背景是否延伸到父元素背景边框下面

    background-clip:border-box  背景颜色或者图片延伸到边框外边缘

    background-clip:padding-box  背景延伸到内边距外边缘，不会伸到边框下面

    background-clip:content-box  背景延伸到内容的外边缘

7) background-attachment:scroll | fixed | local  设置固定背景图像，背景图像滚动机制

    scroll: 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。

     fixed: 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

   local: 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制             区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

   Demo: http://www.w3school.com.cn/tiy/t.asp?f=csse_background-attachment