CSS3_盒子背景

盒子背景

盒子背景：content    padding    特殊的 boder 背景

背景繪製 從 padding 開始繪製

• 
  

 

• 背景裁剪 background-clip（默認值 border-box）

特殊： 在指定文字背景時 -webkit-background-clip: text;

 

• 可選值：
  • border-box    默認值，從 padding 左上角開始繪製，border 單獨繪製

 

• • padding-box    不繪製 border，從 padding 左上角開始繪製

 

• • content-box    不繪製 border，padding，從 content 左上角開始繪製

 

• 背景原始其實位置 background-origin（默認值 padding-box）
• 可選值：
  • padding-box 默認值，從 padding 左上角開始繪製，border 單獨繪製

 

• • border-box    從 border 左上角開始繪製

 

• • content-box    從 content 左上角開始繪製

 

• 與 background-position 的聯繫： background-origin 指定了 background-position（0，0）起始位置
  • background-origin: padding-box 時，background-position 的（0， 0）點爲 padding

 

• • background-origin: border-box 時，background-position 的（0， 0）點爲 border

 

• • background-origin: content-box 時，background-position 的（0， 0）點爲 content

 

• 設置背景圖片的大小 background-size: px / % / cover / contain;
• background-size: px;

  • #box {
        width: 300px;
        height: 300px;
        bakground-image: url(./img/a.jpg);
        
                      /* width  height     若是隻寫一個值，第二個值根據寬高比自動計算*/
        background-size: 100px  100px;
    }

 

• background-size: %;

  • #box {
        width: 300px;
        height: 300px;
        bakground-image: url(./img/a.jpg);
        
      /* 參照於盒子自身的 width  height     若是隻寫一個值，第二個值根據寬高比自動計算*/
        background-size: 100%  100%;
        background-size: 20%;
    }

 

• background-size: cover;    將圖片以容器最遠邊進行縮放

  • #box {
        width: 300px;
        height: 200px;
        bakground-image: url(./img/a.jpg);
        
      /* 拉伸效果： 根據最遠邊進行伸縮調節 */
        background-size: cover;
    }

 

• background-size: contain;

  • #box {
        width: 300px;
        height: 200px;
        bakground-image: url(./img/a.jpg);
        
      /* 拉伸效果： 根據最近邊進行伸縮調節 */
        background-size: contain;
    }

 

• 多重背景 background-image: url(./img/a.png), url(./img/b.png), url(./img/c.png)... ...
• 須要使用 png 帶透明的背景圖
• 前面的圖片會 覆蓋後面的圖片

• #box {
      width: 300px;
      height: 200px;
      
      background-repeat: no-repeat;
      
      background-image: url("img/niu.png") , url("img/cao_bg.png") ;
  
  }

 

• 模糊背景 （CSS3 過濾器： filter）

• #bg {
      width:
      height: 480px;
      
      overflow: hidden;    /* 隱藏模糊溢出 */
  }
  
  #bg img {
      width: 320px;
      height: 480px
      
      filter: blur(5px);
  }
  
  #content {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 320px;
      height: 480px;
  }