background

发表于

background

1
2
3
4
5
整合写法：
backgroun: url("") no-repeat top right yellow;
background-size:；
background-clip:;
background-origin:;
  • background：
    • color
      • rgb
      • “#
      • rgba(0,0,0,0.2) a是透明度 取值范围在0-1
      • transparent 透明
      • inherit 继承父级元素
    • repeat
      • no-repeat
      • repeat-x
      • repeat -y
      • 默认值是 repeat
      • inherit
    • position
      • 水平
        • percentage | length | left | center | right
      • 垂直
        • percentage | length | top | center(图片的中心和盒子的中心重合) | bottom
    • url(“”）
      • 可以引入多张图片用 , 定位都为定位背景的x:0;y0;引入多个图片的方法ie8及以下不兼容；
    • size 大小
      • length x y (值auto将按照比例缩放)
      • percentage x y为百分比
      • cover 保持纵横百分比将图片缩放成完全覆盖定位区域的最大大小
      • contain; 保持纵横百分比将图片缩放成适合定位区域的最小大小
    • origin
      • position的起源位置
      • attachment属性为fixed的时候，该属性没有效果
    • attachment ??????
    • clip
      • border-box
      • padding-box
      • content-box
  1. 将多个小图片放在一个大的透明的图片文件中，调取时，同意调取这张图片，按照图片位置的定位来展现其中的一部分
    • 作用：减少http请求，优化代码