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>
来源:https://www.cnblogs.com/EricZLin/p/8606328.html