今天我们分享关于背景样式的内容。
在css中，背景样式主要有两种：背景颜色和背景图像。在传统的web 1.0时代中，一般都是使用元素的backgroud属性，来为body、table和td等少数的标签定义背景图像。
在web 2.0时代，主要是使用css的background属性来定义。
背景图像：
| 背景图像的属性 | |
| 属性 | 说明 |
| background-image | 定义背景图像的路径 |
| background-repeat | 定义背景图像显示方式，如纵向平铺、横向平铺 |
| background-position | 定义背景图像在元素哪个位置 |
| background-attachment | 定义背景图像的滚动 |
背景颜色background-color：
语法：
background-color:颜色值；
颜色值可以是关键字，也可以是16进制的RGB值。
示例代码：
<html><head><title>背景颜色</title><style type="text/css">div{width:200px;height:80px;border: 1px solid black;}#d1 {background-color:red;}#d2 {background-color:#f3de3f;}#d3 {background-color:#0af7fb;}</style></head><body><div id="d1"></div><div id="d2"></div><div id="d3"></div></body></html>
背景图像background-image：
它定义了背景图像的来源，与HTML中img标签一样。
语法：
background-image:url("路径地址");
示例代码：
<html><head><title>背景图像</title><style type="text/css">#d1{width:150px;height:300px;background-image:url("images/1.jpg");}</style></head><body><div id="d1"></div></body></html>
设定背景图像时，需要设定宽度和高度，与图片的宽高相同，效果才能出来的。图片自己可以用画图板随便画一张，路径保存成代码中的路径，就可以看出效果了。
背景重复background-repeat：
显示方式有两种，水平平铺和纵向平铺，
语法：
background-repeat:取值；
| background-repeat属性取值 | |
| 值 | 说明 |
| no-repeat | 不平铺 |
| repeat | 默认值，水平和垂直同时平铺 |
| repeat-x | 水平x轴平铺 |
| repeat-y | 垂直y轴平铺 |
示例代码：
<html><head><title>背景重复</title><style type="text/css">div{width:800px;height:200px;border: 1px solid black;margin-bottom: 20px;background-image:url("images/2.png");}#d1 { background-repeat:no-repeat;}#d2 { background-repeat:repeat-x;}#d3 { background-repeat:repeat-y;}#d4 { background-repeat:repeat;}</style></head><body><div id="d1">no-repeat</div><div id="d2">repeat-x</div><div id="d3">repeat-y</div><div id="d4">repeat</div></body></html>
背景位置background-position：
定义背景图像的横向位置和纵向位置，它只能应用于块元素和替换元素。替换元素包括img，input，textarea，select和object。
语法：
background-position:像素值或关键字；
示例代码：
<html><head><title>背景位置</title><style type="text/css">#d1{width:500px;height:500px;border: 1px solid black;background-image:url("images/1.jpg");background-repeat:no-repeat;backgronnd-position: 50px 60px;}</style></head><body><div id="d1"></div></body></html>
设定position时，需要x轴和y轴，用像素值，两值之间用空格分隔开。同时还需要指定no-repeat。水平x轴和垂直y轴的坐标系需要大家自己理解一下了，坐标原点在左上角，可以理解为第四象限。
| background-position关键字取值 | |
| 值 | 说明 |
| top left | 左上 |
| top center | 靠上居中 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
示例代码：
<html><head><title>背景位置关键字</title><style type="text/css">#d1{width:500px;height:500px;border:1px solid black;background-image:url("images/1.jpg");background-repeat:no-repeat;background-position: center center;}</style></head><body><div id="d1"></div></body></html>
背景跟随background-attachment：
它是设定背景图像随对象滚动还是固定不动。
语法：
background-attachment:scroll或者fixed；
scroll表示背景图像随对象滚动，是默认值，fixed表示背景图像固定在页面上不动。
示例代码：
<html><head><title>背景滚动</title><style type="text/css">#d1{width:500px;height:500px;border:1px solid black;background-image:url("images/1.jpg");background-repeat:no-repeat;background-attachment:fixed;}</style></head><body><div id="d1"></div></body></html>
设定为fixed后，大家会发现背景图片位于屏幕上的位置就不发生变化了，像固定住了。
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
