CSS背景属性

假如想象 提交于 2020-01-25 16:30:46

1、 background-color     背景颜色

2、 background-image    背景图片

3、 Background-repeat    repeat(默认)  |  no-repeat |   repeat-x   |  repeat-y     背景平铺

4 、Background-position  left  |  right  |  center  |  top  | bottom  背景定位

  ★方位值只写一个的时候,另外一个值默认居中

  ★写2个方位值的时候,顺序没有要求。

  ★写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向。

5、Background-attachment   背景是否滚动   scroll  |  fixed

<style type="text/css">
        .box{
            height: 500px;
            background-color: #999;
            background-image: url(2.png);
            background-repeat: no-repeat; 
            background-position: 20px 30px;
            background-attachment: scroll;
        }
    </style>
</head>
<body>
    <div class="box">fixed的定位以浏览器出发,scroll以元素div定位</div>
</body>

6 、背景属性连写:连写的时候没有顺序要求,url为必写项。

<style type="text/css">
        .box{
            width: 400px;
            height: 500px;
/*
            background-color: #999;
            background-image:  url(../2.26/picture.jpg);
            background-repeat: no-repeat;
            background-position: bottom;
            background-attachment: scroll;
*/
            background: url(../2.26/picture.jpg) red no-repeat 30px 40px scroll;
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!