Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

背景样式

控制背景图片的大小

  • 以前
    • 做不到,背景大小由图片自身决定
    • 只能background-image:url()引入绝对符合大小的图片
  • 现在
    background-size: 取值;
    
    • 参数有两种类型
      • 宽 高
        • 如160px 100px
      • 关键字
        • cover
          • 两个方向等比缩放填满
        • contain
          • 单个方向等比缩放贴边

控制背景图片的位置

  • 以前
    • 属性是background-position:取值
    • 只能控制方位,从哪个角落开始铺背景
  • 现在
    background-origin: 取值;
    
    • 参数可取
      • border-box
        • 盖上外面边框,一路向内平铺
      • padding-box
        • 默认值,盖上内边距,一路向内平铺
      • content-box
        • 只盖上最里面内容,平铺

控制背景图片的剪切

  • 规则
    background-clip: 取值;
    
  • 参数可取
    • border-box
      • 默认值,保留所有部分
    • padding-box
      • 从内边距开始展示,切掉盖在“外面边框”的部分
    • content-box
      • 从最里面内容开始展示,切掉盖在“外面边框+内边距”的部分

多张背景图片

  • 不建议使用,最好做成一张,减少http请求
    • 只要用逗号隔开,多写几个,就多出几张