目录
背景的基本属性
背景颜色：background-color
通过“background-color”属性设置元素的背景颜色，属性值可以为对应颜色的用英文名称或rgb值或十六进制值。
英文名称：background-color: red; rgb值：background-color: rgb(0, 255, 128); 十六进制值：background-color: #bcbc12;
背景图片：background-image
我们不仅可以给元素设置背景颜色，还可以通过设置“background-image”属性来给它设置背景图片。图片的路径可以为本机地址，也可以为一个网络链接。然后，设置元素的宽高与图片的宽高相对应，就可以将图片完美的显示出来了。
div {
width: 300px;
height: 300px;
background-image: url(图片路径);
}
背景铺盖：background-repeat
背景铺盖主要跟图片背景一起用，因为纯色背景就没什么铺盖的必要了。
| 属性值 | 作用 |
|---|---|
| repeat | 背景图像在垂直方向和水平方向重复，默认。 |
| repeat-x | 背景图像在水平方向重复 |
| repeat-y | 背景图像在垂直方向重复 |
| no-repeat | 背景图像只显示一次 |
| inherit | 继承父元素的 background-repeat 属性值 |
背景大小：background-size
当我们所用的图片太大或者太小的时候，可以通过“background-size”属性来设置背景图片的大小。此时要记得等比例压缩或放大，否则画面不忍直视。
背景固定：background-attachment
通过“background-position”属性可以设置背景对页面滚动的反应。
| 属性值 | 作用 |
|---|---|
| scroll | 背景图片随着页面的滚动而滚动，默认。 |
| fixed | 背景图片不会随着页面的滚动而滚动，此时图像定位时参照的就是页面了，可能不会在元素中显示出来或仅显示一部分。 |
| local | 背景图片会随着元素内容的滚动而滚动。 |
| inherit | 继承父元素的 background-attachment 属性值 |
背景定位：background-position
设置的背景图片默认是从元素的左上角开始的，但是我们可以通过设置"background-position"属性来移动图片的位置。注意，此处的定位是相对于元素的，相对于元素左上角的！
| 属性值 | 使用方法 |
|---|---|
| left top | 通过top、bottom、left、right、center五个英文单词两两组合来设置图像的位置 |
| 50px 50px | 通过数值来设置图片的位置，数值的单位是像素、百分比等 |
| inherit | 继承父元素的 background-position 属性值 |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div:nth-of-type(1) {
width: 1280px;
height: 720px;
background-size: 640px 360px;
background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
background-position: left bottom;
background-repeat: no-repeat;
background-color: yellow;
}
div:nth-of-type(2) {
width: 2560px;
height: 1440px;
background-color: red;
background-size: 1280px 720px;
background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
div:nth-of-type(3) {
width: 2560px;
height: 1440px;
background-size: 1280px 720px;
background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
background-repeat: repeat;
}
div:nth-of-type(4) {
width: 2560px;
height: 1440px;
background-color: red;
background-size: 1280px 720px;
background-image: url(https://img.zcool.cn/community/01936a58be7362a801219c77fe8358.jpg@1280w_1l_2o_100sh.jpg);
background-position: 50% 60%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
背景定位一
</div>
<div>
背景固定
</div>
<div>
背景铺盖及大小设置
</div>
<div>
背景定位二
</div>
</body>
</html>总结
本文总结了一些背景设置的基本属性，基本能满足平时的使用需求，下一篇文章会涉及到背景的渐变设置，滤镜等。
文中若有不当之处，欢迎各位朋友批评指正。