首页 > 代码库 > HTML CSS——background的认识(一)

HTML CSS——background的认识(一)

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

        1、background-color:设置元素的背景色。其值可以为:color-namecolor-rgbcolor-hextransparent;

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

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

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


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


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


              d、no-repeatX轴和Y轴方向均不重复,即横向和纵向均不重复,如下图:


              【0分下载上述测试资源

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


               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的认识(二)