技術標籤：前端htmlcss

背景樣式詳解

• opacity和display的區別

  1. opacity設定的是透明度，值的範圍是0~1，0代表完全透明，1代表不透明

  2. display為none，瀏覽器就不會渲染這個元素。

     一個元素設定為display為none後想讓他在顯示出來使用，display:原來的顯示型別；

• 背景顏色的顯示區域

  內容區+padding+border

• 背景圖片

  background-image: url(‘圖片地址’) ;

  div{
      background-image: url('./images/pic.jpg');
  }
  

  背景圖片的顯示區域 內容區域+padding+border

  背景圖片支援的格式：.jpg，.png，.gif，.webp

• 瀏覽器的渲染層級

  第一層：內容層

  第二層：邊框層

  第三層：背景圖片

  第四層：背景顏色

• 背景圖片為什麼會重複顯示：

  瀏覽器發現圖片比盒子小就會讓圖片平鋪把盒子佔滿

• 如何讓背景圖片不重複顯示：

  使用background-repeat屬性，它有三個值

  div{
      background-repeat:
      	no-repeat /*垂直方向和水平方向都會重複*/
          repeat-x /*水平方向平鋪*/
          repeat-y /*垂直方向平鋪*/
          repeat /*垂直方向和水平方向都會重複*/
   
  
          ;
  }
  

  background-repeat:

  ​ repeat -> 垂直方向和水平方向都會重複

  ​ repeat-x -> 水平方向平鋪

  ​ repeat-y -> 垂直方向平鋪

  ​ no-repeat -> 水平垂直方向都不平鋪

  ；

• 設定完背景圖片不平鋪之後發現圖片不會出現在border內，為什麼？

  背景圖片在設定平鋪的時候會先在內容區顯示一張圖片，然後再去平鋪。

• 如何把背景圖片拉大？

  使用background-size的屬性，它有兩個值：

  ​ background-size：width背景圖片的寬 height背景圖片的高；

  ​ 寬高可以設定為畫素值，也可以設定為百分比：

  div{
      width:500px;
      height:500px;
      background-size: 350px 350px;/*支援*/
      background-size:50% 50%;/*同樣支援,但百分數的基數是width和height屬性，也就是說現在圖片的寬度是1*500=500px 高度是1*500=500px*/
      background-size:350px;/*只寫一個值的時候寬縮放至350px，高等比例縮放*/
  }
  

  /*除此之外background還有兩個比較特殊的值，cover，contain*/
  div{
      width:500px;
      height:500px;
      background-size: 
          cover/*圖片一直縮放到鋪滿整個內容區域*/
          contain/*一條邊縮放到鋪滿內容區域後另一條邊停下來*/
          ;
  }
  

  • 預設情況下背景圖片是貼著padding的左上角去排列的，怎麼改變它的起始點？

    使用background-origin屬性

    div{
        background-origin:
            padding-box/*背景圖片相對於內邊距來定位*/
            border-box/*背景圖片相對於內邊距來定位*/
            content-box/*背景圖片相對於內容區域來定位*/
            ;
    }
    

  • 背景剪裁

    使用background-clip屬性,會裁剪背景圖片和背景顏色

    div{
        background-clip:
            content-box/*只顯示內容區部分的圖片和顏色*/
            border-box/*顯示border+padding+內容區的背景圖片和背景顏色*/
            padding-box/*顯示padding+內容區的背景圖片和背景顏色*/
            ;
    }
    

• overflow屬性：

  div{
      overflow:
          visible/*超出之後正常顯示*/
          hidden/*超出隱藏*/
          scroll/*內容不管超不超出都顯示出一個滾動條*/
          auto/*內容不超出的時候不顯示滾動條，內容超出則顯示滾動條*/
          ;
  }
  

• 什如何讓背景圖片不跟隨內容區域滾動

  使用backgroun-attachment屬性

div{
    background-attachment:
        scroll/*預設，不隨內容區域滾動，而是定在起始的位置*/
        local/*會隨內容的滾動而滾動*/
        fixed/*非常詭異的一種情況*/
        ;
}

• 背景圖片複合樣式寫法:

  div{
      background: color image repeat attachment position/size;/*位置和大小之間要使用/分隔開*/
  }