CSS——背景相关属性

1.  background-color:   color  |   transparent

  •     color :   color  设置背景的颜色,它可以采用英文单词、 十大进制、RGB、 HSL、HSLA 和 RGBA。
  •     transparent:   表示透明。     

  2.    background-image:   none  |  url  (url)  

  •         none :   无图片背景。
  •         url  (url):  使用绝对或相对地址指定背景图像。不仅可以输入本地图像文件的路径和文件名称,也可以用  URL 的形式输入其他网站位置的图像背景。
        页面中可以用  JPG  或者 GIF 图片作为背景图,这与向网页中插入图片不同,背景图像放在网页的最底层,文字和图片等都位于其上。

3.   background_repeat:   inherit  |  no_repeat  |  repeat  |  repeat_x  |  repeat_y

  •     inherit:  从父元素继承  background_repeat  属性的设置。
  •     no-repeat:  背景图像只显示一次,不重复。
  •     repeat:  在水平和重直方向上重复显示背景图像。
  •     repeat-x:  只沿 x 轴水平方向重复显示背景图像。
  •     repeat-y:  只沿 y 轴垂直方向重复显示背景图像。

4.   background-attachment:  scroll  |  fixed

  •     scroll:    当页面滚动时,背景图像跟着页面一起滚动。
  •     fixed:     将背景图像固定在页面的可见区域。

5.  background-position:   length  |   percentage  |   top  |  center  |  bottom  |  left  |  right  

  •     length:    设置背景图像与页面边距水平和垂直方向的距离,单位为  cm、mm、px 等
  •     percentage:    根据页面元素框的宽度和高度的百分比放置背最图像。
  •     top:    设置背层图像顶部居中显示。
  •     center:    设置背景图像居中显示。
  •     bottom:    设置背景图像底部居中显示。
  •     left:    设置背景图像左部居中显示。
  •     right:    设置背景图像右部居中显示.



6.  指定背景的显示范围——background-clip

    background-clip  属性的语法格式如下:

    background-clip:   border-box   |   padding-box   |  content-box  |   text  

  •     border-box:    从  border  区域(不含border) 开始向外裁剪背景。
  •     padding-box:    从 padding  区域(不含padding) 开始向外裁剪背景。
  •     content-box:    从 content  区域开始向外裁剪背景。
  •     text: 从前景内容的形状  ( 如文字 ) 作为裁剪区域向外裁前。使用该属性值可以实现使用背景作为填充色之类的遮罩效果。


7.  指定背景图像的起点——background-origin

     background-origin  属性的语法格式如下:

    background-origin:   border-box   |   padding-box   |   content-box  

  •     border-box:   从 border 区域 (含 border ) 开始显示背景图像;
  •     padding-box:   从 padding  区域 (含 padding ) 开始显示背景图像:  
  •     content-box:   从 content  区域开始显示背景图像:

8.  指定背景图像的尺寸——background-size

    background-size  属性的语法格式如下

    background-size:   [ <length>  |   <percentage>  |  auto  ]   |  cover   |  contain
  •     <length>:    由浮点数字和单位标识符组成的长度值,不可为负值。该参数可以设置一个值,也可以设置两个值,如果只设置一个值,那么为宽度值,图像将进行等比例缩放,否则分别为宽度值和高度值。
  •     <percentage>:    取值为  0%  到 100% 之间的值,不可为负值。该参教可以设置一个值,也可以设置两个值,如果只设置一个值,那么为宽度的百分比,图像将进行等比例缩放,否则分别为宽度的百分比和高度的百分比。
  •     auto:    背景图像的原始尺寸。
  •     cover:    将背最图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
  •     contain:    将背景图像等比缩放到宽度成高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

9.   多背景图片

    实际上,CSS3  并没有为实现多背最图片提供对应的属性,而是通过为   background-image、background-repeat、background-position、background-size  等属性提供多个属性值(各个属性值之间以英文逗号分隔)来实现。



缩写示例:

background:  #fff   url(img.png)  no-repeat  fixed  0  0 ;


猜你喜欢

转载自blog.csdn.net/qq_41573234/article/details/80545287