首页 > 代码库 > HTML CSS——background的认识(一)
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的认识(一)