zoukankan      html  css  js  c++  java
  • 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的认识(二)


  • 相关阅读:
    客户端发现响应内容类型为“text/html”,但应该是“text/xml”
    [转]AJAX Control Toolkit 介绍及构建开发环境
    kafka删除topic详解
    influxdb问题解决
    logback配置
    kafka环境搭建测试
    Hdu 1753 大明A+B <高精度小数相加>
    POJ 1966 <点连通度>
    POJ 2446 Chessboard 二分图的最大匹配 <建图>
    Hlg 1522 子序列的和 <单调队列>
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/3983010.html
Copyright © 2011-2022 走看看