HTML CSS——background的认识（一）

今天回归bug时无意间看到了样式表中background属性，现在总结一下：

1、background-color：设置元素的背景色。其值可以为：color-name、color-rgb、color-hex、transparent；

2、background-image：设置元素的背景图像。其值可以为：url(URL)、none；

3、background-repeat：设置元素背景图像是否重复以及重复时的重复方式。其值可以为：repeat、repeat-x、repeat-y、no-repeat。这里有必要对其值进行必要的说明：

a、repeat：重复方向为X轴和Y轴，即图片会横向和纵向铺满元素区域，注意：在学习时，尽量使用的图片小点，否则看不到效果，如下图：

b、repeat-x：重复方向为X轴，即图片只会横向铺满元素区域，纵向区域不会重复铺满，如下图：

c、repeat-y：重复方向为Y轴，即图片只会纵向铺满元素区域，横向区域不会重复铺满，如下图：

d、no-repeat：X轴和Y轴方向均不重复，即横向和纵向均不重复，如下图：

【0分下载上述测试资源】

4、background-attachment：设置背景图片是否随滚动条的移动而移动。其值可以为：scroll、fixed、inherit，下面结合例子来理解其具体的含义：

a、scroll：背景图片随滚动条的移动而移动，即言：当上图中的滚动条向下拉动时图片就会向上移动；

b、fixed：背景图片不随滚动条的移动而移动，即言：当上图中的滚动条向下拉动时图片不会随着滚动条的移动而移动；

c、inherit：继承上级标签的此属性的属性值，即言：如果上级标签该属性的值为scroll，则当前标签的此属性也为scroll；如果上级标签该属性的值为fixed，则当前标签的此属性也为fixed；

【0分下载上述测试资源】

5、background-position：设置背景图像的起始位置。其值可以为：

a、top left

b、top center

c、top right

d、center left

e、center center

f、center right

g、bottom left

h、bottom center

i、bottom right

j、x% y%

k、xpos ypos

对其深入的理解，请参见博客：HTML CSS——background的认识（二）

HTML CSS——background的认识（一）,布布扣,bubuko.com