html 关于背景的属性 意义和设置

背景

background              背景
background-color        背景色 
background-image        背景图片
background-repeat       背景图片是否重复
background-position     背景图片的位置
background-attachment 背景图片是否滚动

1. 背景色会铺满整个容器
2. 背景不会占用容器的宽高(颜色和图片都不会)
   如果div没有宽高，内容可以把容器的宽高撑开

<style>
    div{
        width:300px;
        height:300px;
        border:10px solid red;
        background-color:green;
        background-color:rgba(255,107,35,1);
        background-color:#008800; /* #080 */
        background-color:transparece;
    }
</style>

<div>

</div>

3. 背景图片
   url(图片的地址)
   none:没有背景图（默认）

<style>
    div{
        width:300px;
        height:300px;
        border:10px solid red;
        background-image:url(images/img.jpg);
        background-image:none;
    }
</style>

<div>

</div>

4. 背景图平铺

no-repeat       不重复平铺
repeat-x        横向平铺
repeat-y        纵向平铺 
repeat          全部平铺 （默认）

background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:repeat;`

5. 背景图片位置

传数值 :       背景图片离左上角的距离
x           正值/负值
y           正值/负值

传关键字：   
x           left/right/center
y           top/bottom/center

如果只传一个值得话，那另一个值默认为center
如果两个值都不写的话，那默认为0, 0点，左上角

background-position: 50px 50px;
background-position: center 50px;

6. 背景是否滚动

scroll      背景图片跟随滚动条滚动（默认）
fixed       背景图片不会跟随滚动条滚动

background-attachment：fixed;

7. 背景复合样式

<style>
    div{
        background-image:url(images/img.jpg);
        background-position:left top;
        background-repeat:no-repeat;
        background-attachment:scroll;

        background:green url(images/img.jpg) no-repeat center top;
    }
</style>

打赏

微信扫一扫，打赏作者吧～