background background-color background-attachment background-image background-position background-position-x background-position-y background-repeat
设置背景色(譬如红色): background-color: red; 或者 background: red;
![o_0912918.png](https://i-blog.csdnimg.cn/blog_migrate/78cab43552201fef37c5619d88db02af.png)
背景图片: background-image: url(路径); 或者 background: url(路径);
其中的路径可以是相对或绝对路径, 可以带双引号或单引号.
![o_0912919.png](https://i-blog.csdnimg.cn/blog_migrate/595505b36fd60b55ce4cfe9f566bb0dd.png)
background-repeat(背景图片反复方式): repeat(默认)、no-repeat、repeat-x、repeat-y.
![o_0912920.png](https://i-blog.csdnimg.cn/blog_migrate/9d6089ef958d95cd26d050bd23349c9a.png)
![o_0912921.png](https://i-blog.csdnimg.cn/blog_migrate/ff0ab84c3954713fd7a0dd568b4610e7.png)
![o_0912922.png](https://i-blog.csdnimg.cn/blog_migrate/4a8cc32226bc54a0a0ccd155b8b77a68.png)
![o_0912923.png](https://i-blog.csdnimg.cn/blog_migrate/2cc6758887e6035c7d12e4321d08dd0b.png)
background-position(背景图起始位置):
上中: top 或者 top center 上左: top left(默认) 上右: top right 中心: center 或者 center center 中左: left 或者 center left 中右: right 或者center right 下中: bottom 或者 bottom center 下左: bottom left 下右: bottom right 还可以用百分比或具体的数值描述: x% y% 或 xpos ypos
![o_0912924.png](https://i-blog.csdnimg.cn/blog_migrate/616168162f490b98743ce787f6a1e0fc.png)
![o_0912925.png](https://i-blog.csdnimg.cn/blog_migrate/20f084c59f7204196b96d8a7e892972f.png)
![o_0912926.png](https://i-blog.csdnimg.cn/blog_migrate/0b4aa17a40fceb739bee3d33d2ced86f.png)
![o_0912927.png](https://i-blog.csdnimg.cn/blog_migrate/5a3136013f5593fedda0959a6a77365c.png)
![o_0912928.png](https://i-blog.csdnimg.cn/blog_migrate/3766dcbc5746a37b8cfadf2ff1b4e116.png)
![o_0912929.png](https://i-blog.csdnimg.cn/blog_migrate/1ff4ac478b6f44f67696ee8b7716194f.png)
![o_0912930.png](https://i-blog.csdnimg.cn/blog_migrate/b3b8fb6f64ff7aeea52fbc251d87e838.png)
![o_0912931.png](https://i-blog.csdnimg.cn/blog_migrate/1194718de09343595d47e70ae9638ce6.png)
![o_0912932.png](https://i-blog.csdnimg.cn/blog_migrate/3b107866d48ff2aa1bc30739bcf8fd70.png)
![o_0912933.png](https://i-blog.csdnimg.cn/blog_migrate/a81c9c8e0a8d8addfc09d85fda6ac784.png)
![o_0912934.png](https://i-blog.csdnimg.cn/blog_migrate/0cc1eabbc7b53f6708b113af9fa1af30.png)
background-position 本来就是有 x、y 两个值构成的, 也可用
background-position-x 和 background-position-y 单独设定.
background-attachment(设置背景是否随滚动条滚动): scroll(默认)、fixed(不滚动).
![o_0912935.gif](https://i-blog.csdnimg.cn/blog_migrate/183a8e36c1fd6c09614015c68ba48d9f.gif)
用 background 可以同时设置:
background-color、background-attachment、background-image、background-position、background-repeat
竟没有顺序的要求, 也可随意省略, 只是 position 用两个值时不要分开即可.
![o_0912936.png](https://i-blog.csdnimg.cn/blog_migrate/f9c172802455ded105603708bd48db43.png)