CSS样式之背景样式
1.背景颜色
2.背景图片
3.背景图片的偏移
4.背景图片的定位
5.背景样式的属性连写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景属性的学习</title>
<style type="text/css">
.box {
/*背景颜色*/
background-color: darkgoldenrod;
/*背景图片*/
background-image: url(../../img/2.png);
/*
* 背景图片的偏移方向:
* repeat 默认
* repeat-x 水平方向偏移
* repeat-y 竖直方向偏移
* no-repeat 无偏移
*/
background-repeat: no-repeat;
/* 背景定位
* 方位值只写一个的时候,另外一个值默认居中
* 写2个时 没有顺序,第一个表示水平 第二个表示竖直
* 属性值:left | right | top | bottom | center
*/
background-position: left;
/*
* 背景是否滚动
* scroll: 滚动
* fixed: 不滚动
*/
background-attachment: fixed;
}
.box1 {
height: 200px;
/*背景属性的连写
*连写的时候没有顺序要求,url为必写项。
*/
background: red url(../../img/1.png) fixed repeat-x;
}
</style>
</head>
<body class="box">
<div class="box1">
</div>
</body>
</html>