CSS样式设置网页背景

首先我们要知道在HTML、CSS里面，有关背景的设置都与background有关，比如background-color：background-image：等

1、background-color属性-设置背景颜色

语法：background-color：颜色；

这里的颜色可以直接用颜色名字，也可以使用三元色、十六进制等；

如：background-color:rgba（0,0,0,.8）;

2、background-image属性-设置背景图像

语法：background-image：url（地址）；

如：background-image：url（火影/1.png）；

url是指向地址，图片的名字必须加后缀，不同的流浏览器对格式也有不同的需求；

3、background-repeat属性-背景重复

语法：background-repeat：重复方式；

相关方式有：no-repeat不重复、repeat-x向X方向重复、 repeat-y向Y方向重复、 repeat水平垂直都重复；

如：background-repeat：repeat；

这里我们需要了解的是：HTML里面也可以通过background来设置背景图片，但是是不能通过此方法调整的；

4、background-position属性-设置背景的位置

语法：background-position：位置；

相关位置：length（图片与边界的距离，cm、mm、px） 、percentage（页面的宽度和高度的百分比） 、top（顶部）、 center（居中） 、bottom（底部）、 left 、right；

5、background-attachment属性-控制背景图片不动

语法：background-attachment：属性值；

相关属性值：scroll（默认值，当页滚动条滚动时，背景跟着滚动）、fixed（背景不会懂）；

在浏览器中浏览页面时，当拖动滚动条时背景也会随之移动，而此属性就是固定背景的位置。

6、background-size属性-背景大小

语法：background-size：属性值；

相关属性值：length（长度值，如：13px 13px表示长宽都是13px）、percentage（原图的百分比0%~100%）、cover（保持宽高比，刚好覆盖定义区域）、contain（同cover）；

7、background-origin属性-控制背景现实区域

语法：background-origin：属性值；

相关属性值：border-box（从元素盒模型的border区域开始显示）、padding-box（从padding盒模型开始）、content-box（从content盒模型开始）；

此属性是方便控制背景图片的显示位置；