zoukankan      html  css  js  c++  java
  • CSS的 背景属性

    ㈠背景色  background-color

    ⑴background-color 属性设置元素的背景颜色。

    ⑵元素背景的范围:

    background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。

    如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

    ⑶可能会用到的值:

     ㈡背景图像     background-image

    ⑴background-image 属性为元素设置背景图像。

    ⑵元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。

    ⑶默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。

    ⑷可能会用到的值:

    ㈢背景重复    background-repeat 

    ⑴background-repeat 属性设置是否及如何重复背景图像。

    ⑵默认地,背景图像在水平和垂直方向上重复。

    ⑶可能会用到的值:

     

    ㈣背景定位   background-position 

    ⑴关键字

    根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对应垂直方向。

    如果只出现一个关键字,则认为另一个关键字是 center。

    所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:

    
    
    p
      { 
        background-image:url('bgimg.gif');
        background-repeat:no-repeat;
        background-position:top:
    }
     

    ⑵百分数值

    百分数值同时应用于元素和图像。

    图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。

    如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。

    background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺

    
    

    ⑶长度值

    长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

    比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上

    ⑷可能会用到的值:

    ㈤背景关联   background-attachment

    ⑴如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。

    ⑵background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

    ⑶可能会用到的值:

    ㈥CSS 背景属性

     

    ㈦代码示例区

     ⑴本例演示如何为元素设置背景颜色。

    代码:

     

     效果图:

     

    ⑵本例颜色如何设置部分文本的背景颜色。

    代码:

    效果图:

    ⑶本例演示如何将图像设置为背景。

    代码

     

     效果图:

     ⑷本例演示如何为多个元素同时设置背景图像。

    代码:

    效果图:

     ⑸本例演示如何重复背景图像。

    代码:

     

     效果图:

    ⑹本例演示如何垂直地重复背景图像。

    代码

     效果图:

     ⑺本例演示如何垂直地重复背景图像。

     代码:

    效果图:

    ⑻本例演示如何仅显示一次背景图像。

     代码:

     

     效果图:

    ⑼本例演示如何在页面上放置背景图像。

     代码:

     

    效果图:

     ⑽本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。

    代码:

      

     效果图:

    (11)本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。

     代码:

     

    效果图:

         希望有所帮助        

  • 相关阅读:
    Designing IP-Based Video Conferencing Systems: Dealing with Lip Synchronization(唇音同步)
    ffmpeg 如何音视频同步
    音视频同步(播放)原理
    您的 PHP 似乎没有安装运行 WordPress 所必需的 MySQL 扩展”处理方法
    ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
    ERROR 1290 (HY000): The MySQL server is running with the --skip-grant-tables option so it cannot execute this statemen
    获得H.264视频分辨率的方法
    1080P、720P、4CIF、CIF所需要的理论带宽
    linux mysql 操作命令
    RTP/RTCP的时间同步机制
  • 原文地址:https://www.cnblogs.com/shihaiying/p/11311053.html
Copyright © 2011-2022 走看看