zoukankan      html  css  js  c++  java
  • css设置元素背景

    背景background 简写形式为

    backgroud:background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image

    其中

    1.background-color背景颜色

    2.background-position 设置图像的位置 可取两个值,字符串的话,第一个表示垂直方向,值包括top.bottom.center。第二个表示水平方向,值包括left.right.center。数字单位或百分数的话,第一个表示水平方向,如10px即距离左边界10px,第二个表示垂直方向 ,如10%,距离上边界10%的高度距离,最上为0.最下为100%。

    3.background-size背景尺寸,四个可取值。

      数字单位  数字单位 第一个为宽度,第二个为高度,如果只设置一个,另一个为auto.如20px 20px 

      百分数 百分数  同上

      contain 等比例缩放图像,图像尽量充满容器,图像始终包含在容器里

      cover 等比例缩放,图像尽量覆盖容器,有可能超出容器

      auto 默认值,以本身尺寸显示

    4.background-repeat 可取五个值

      repeat-x 水平方向平铺图像,图像可能被截断

      repeat-y  垂直方向平铺图像,图像可能被截断

      repeat 水平和垂直方向同时平铺

      space 水平或垂直方向平铺图像,设置图像统一间距,确保图像不被截取

      round 水平或垂直平铺图像,调整图像大小,确保不被截断

      no-repeat 禁止平铺

    5.background-origin 可取三个值,表示背景绘制区域

      border-box 边框和边框以内

      padding-box 边框以内所有区域 

      content-box 内容区域

    6.background-clip 裁剪盒子,表示可见性,取值可origin相同

    7.background-attachment 表示内容附着方式 可取三个值

      fixed 固定在视窗上,内容动背景不动

      local 背景随内容滚动

      scroll 背景固定在元素上,不随内容滚动

    8.background-image none或url,如果指定一个以上,后面的绘制在前面图像下面。

    body
      { 
      background: #00FF00 url(bgimage.gif) no-repeat fixed top;
      }

    对于顺序,经过验证,貌似没有标准、

  • 相关阅读:
    hdu 3666 差分约束系统
    hdu 1198农田灌溉
    常微分方程(阿諾爾德) Page 45 相空間,相流,運動,相曲線 註記
    高等微積分(高木貞治) 1.4節 例2
    常微分方程(阿諾爾德) Page 45 相空間,相流,運動,相曲線 註記
    解析函數論 Page 29 命題(2) 函數模的有界性
    高等微積分(高木貞治) 1.4節 例2
    解析函數論 Page 29 命題(1) 有界閉集上的一致連續性
    解析函數論 Page 29 命題(3) 模的下界的可達性
    解析函數論 Page 29 命題(2) 函數模的有界性
  • 原文地址:https://www.cnblogs.com/cumting/p/6755009.html
Copyright © 2011-2022 走看看