在前端设计中背景是缺一不可的，接下来就来简单介绍一下背景的相关样式。
本次还是以div标签来进行说明。
一、背景颜色：background-color
此属性用来设置背景颜色。那么颜色的表示在前面的文章中已经提到有三种表现方式：英文（red、blue...）、RGB值、16进制值（#ffffff）。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景颜色</title>
<style>
.container{
width:200px;
height:200px;
border:2px solid red;
background-color:pink;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
效果如下所示：
二、背景图片：background-image
图片背景在正常使用中用的比较频繁。必须要注意的是如果要给div设置背景图片的话必须要给div设置
宽高。如果不设置宽度的话那么div的宽度将为div父元素的宽度；如果没有设置高度则不会显示任何东西。
还需要注意的是：如果图片的宽高超过了div的宽高，那么div也不会被撑开，最终的显示效果会是图片只显示一部分。
背景图片在引用时url的值分为绝对地址和相对地址，由于绝对地址在磁盘更换、主机更换等原因后可能找不到资源，因此建议使用相对地址。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
.container{
width:500px;
height:500px;
border:2px solid red;
background-image: url(img/haizeiwang_little.jpg);
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
效果如下所示：
我们可以明显的看到背景图片进行了无数的重复，直到铺满整个div。如果我们不想让背景图片重复呢？
那么就需要用到我们下面要说到的background-repeat属性。
三、背景重复：background-repeat
此属性表示背景图片的重复效果，默认情况下如果图片的宽高不能铺满整个div的话那就会进行横向（X轴）、纵向（Y轴）进行重复显示。
background-repeat属性值：
repeat：重复（默认值）。
no-repeat：不重复，仅显示图片的原尺寸。
repeat-x：横向平铺（X轴平铺）
repeat-y：纵向平铺（Y轴平铺）
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片平铺</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
运行效果如下图所示：
四、背景图片定位：background-position
此属性用来定义背景图片在div中的显示位置，分为水平方向位置和垂直方向位置。
水平方向的位置分为：左（left）、中（center）、右（right）、数值
垂直方向的位置分为：上（top）、中（center）、下（bottom）、数值
在不写background-position属性的时候图片的默认显示位置为：左上（left top）
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片定位--默认位置</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang_little.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
显示效果如下所示：
我们可以指定位置让图片显示在具体的位置：
如显示在右边中间位置，代码和效果如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片定位--右中位置</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang_little.jpg);
background-repeat:no-repeat;
background-position:right center;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
如果位置是center的话，那么center可以不写。如：右下位置为（right center），也可以写成（right）
例如：如果要图片显示在中下的位置，代码和效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片定位--中下位置</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang_little.jpg);
background-repeat:no-repeat;
background-position:bottom;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
我们同样也可以使用数值的方式更加自由的来决定图片的位置。
如：让图片在水平方向距左边20px，垂直方向居中显示。代码和效果如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片定位--自定义位置</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang_little.jpg);
background-repeat:no-repeat;
background-position:20px center;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
五、背景图片滚动：background-attachment
background-attachment的属性值有两个：fixed、scroll
fixed：可以理解为将图片订在浏览器的某个位置，它不会随着浏览器一起滚动。
scroll：会随着浏览器滚动。
示例代码和效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片滚动</title>
<style>
#bgDiv {
width:700px;
height:700px;
border:2px solid blue;
background:url(img/haizeiwang_little.jpg) no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
在上图中可以看到浏览器已向下滚动了，由于背景图片设置了background-attachment为fixed，因此图片依然显示在左上角。
六、背景样式合并：background
不管是背景颜色还是背景图片，又或者说是背景的定义、平铺等等，这些都属于背景的相关样式，
那可以使用background来统一的设置背景的相关样式。代码和效果如下图所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid #C71585;
background:red url(img/haizeiwang_little.jpg) no-repeat 30px 40px;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
合并样式（background）中的属性顺序可以随意调整，没有固定的顺序；同样的属性也可写也可以不写。
注意：如果使用了合并样式（background），那么最好不要再使用单独的分样式，因为有会进行覆盖。
代码和效果如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid #C71585;
background:red url(img/haizeiwang_little.jpg) no-repeat 30px 40px;
background-color:blue;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
在这个例子中合并样式background已经定义了背景颜色为红色（red），但是后面又单独定义了background-color为蓝色（blue），
由于background-color是在background之后定义的，因此背景颜色将从red被替换成blue。
ok，背景相关的样式介绍完毕，你明白了吗？