Web前端学习整理(六)

背景属性:

-background属性用于设置盒子的背景颜色和图片等背景信息,是一个复合属性.

        backgorund: color image repeat position/size attachment

---

background-color:

        背景颜色值,背景颜色默认延伸到border的下方,即border以内的盒子模型区域.

        

<style>
  #container{
    width: 100px;
    height: 100px;
    background-color: #ff6600;
    border: 10px solid #000;
  }
</style>
<div id="containeer"></div>

background-image:

        1.不插入背景图片:

                -background-image:none;

        2,插入背景图片:

                -background-image:url('路径');

back-repeat:

背景图片平铺方式:

         1 : 背景图片平铺 默认

        background-repeat: repeat; 

        2 : 背景图片不平铺 

        background-repeat: no-repeat; 

        3 : 背景图片水平平铺

        background-repeat: repeat-x;

        4 : 背景图片垂直平铺 

        background-repeat: repeat-y; 

background-position:

        -背景图片的位置,确切的说是显示相对于图片的位置.

                background-position:X Y;

                -X和Y默认是：0 0

background-size:

设置背景图片的尺寸,通常用于不改变图片宽高比例的情况下,铺满整个盒子.`background-        size:cover;等比例缩放直到铺满X轴和Y轴所有

        background-size:contain;`等比例缩放直到铺满X或Y轴其中一个

background-attachment:

        -scroll 背景随着滚动而滚动,默认值.

        -fixed 背景不随着滚动而滚动

---

背景图片和<img>标签的比较:

        -背景图片不占用content,相当于给背景附加一个颜色,content内容会显示,但是<img>会占用该区域.

        -背景图片超出了父级元素大小则不会显示超出部分,但是<img>标签会显示出来.