Question

• CSS 背景属性复习
  • background :
    • background-color :背景颜色
    • background-image :背景图片
    • background-repeat :背景重复
    • background-position :背景定位
    • background-attachment :背景固定( scroll/fixed)
• CSS3 新增背景属性
• background-size 背景尺寸
  • background-size:x y 水平 垂直方向的尺寸，像素/百分比/auto/…
  • background-size:100% 100%
  • background-size:cover 比例放大
  • background-size:contain 包含（图片不溢出）
• 多背景
  • background-image:url(1.jpg),url(2.jpg) ;
• background-origin 背景区域定位
  • border-box ： 从 borde r 区域开始显示背景。
  • padding-box ： 从 padding 区域开始显示背景。
  • content-box ： 从 content 内容区域开始显示背
• background-clip 背景绘制区域
  • border-box ： 从 border 区域向外裁剪背景。
  • padding-box ： 从 padding 区域向外裁剪背景。
  • content-box ： 从 content 区域向外裁剪背景。
• text :背景填充文本
  • no-clip ： 从 border 区域向外裁剪背景
• 颜色渐变
  • 线性渐变 ： linear-gradient (起点/角度，颜色 位置，…,)
    • 起点： left/top/right/bottom/left top...... 默认 top
    • 角度：逆时针方向 0-360 度
    • 颜色 位置： red 50% , blue 100% (红色从 50%渐变到 100%为蓝色)
    • repeating-linear-gradient 线性渐变重复平铺
      • IE 低版本渐变（滤镜)：
      • filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');
  • 径向渐变 ： radial-gradient (起点（圆心位置), 形状/半径/大小，颜色 1，颜色 2)
    • 起点： left/top/right/bottom 或具体值/百分比
    • 形状： ellipse (椭圆)、 circle (正圆)
    • 大小：具体数值或百分比，也可以是关键字（ closest-side (最近端), closest-corner 最近角), farthest-side (最远端), f arthest-corner (最远角), contain (包含) , cover (覆盖)）;