【css】background筆記

以前筆試題有一道選擇題是關於background屬性的，後來查閱資料才發現background有各類子屬性，特寫此文章整理一下。

瀏覽器兼容性支持

PC端：

移動端：

background屬性

【盒模型】

• background-image

  定義背景圖像。

• background-color

  定義背景顏色。

• background-origin【css3新增】

  指定背景的顯示區域。默認狀況下，老是以元素左上角爲座標原點進行背景圖像定位。
  值：border-box | padding-box | content-box

  • border-box 從邊框區域開始顯示背景,背景會延伸到外邊界的邊框，但邊框在上，背景在下。

  • padding-box 從補白區域開始顯示背景，背景延伸到最外邊界的padding，邊框不會有背景出現。

  • content-box 僅在內容區顯示背景

• background-clip【css3新增】

  指定背景的裁剪區域。
  值：border-box | padding-box | content-box
  【看栗子】
  #mydiv{ padding: 25px; border: 10px dotted #000; background-color:yellow; }

  • border-box 背景會延伸到外邊界的邊框，但邊框在上，背景在下。
    

  • padding-box 從補白區域開始顯示背景，背景延伸到最外邊界的padding，邊框不會有背景出現。
    

  • content-box 僅在內容區顯示背景
    

• background-repeat

  設置背景圖像是否及如何重複鋪排
  / 單值語法 /
  background-repeat: repeat-x;//至關於 repeat no-repeat
  background-repeat: repeat-y;
  background-repeat: repeat;
  background-repeat: space;
  background-repeat: round;
  background-repeat: no-repeat;

  / 雙值語法: 水平horizontal | 垂直vertical /
  background-repeat: repeat space;
  background-repeat: repeat repeat;
  background-repeat: round space;
  background-repeat: no-repeat round;

  background-repeat: inherit;

  • repeat
    圖像會按需重複來覆蓋整個背景圖片所在的區域. 若是大小不合適，最後一個圖像會被裁剪,

  • space 【當前沒有普遍支持】
    圖像會儘量得重複, 可是不會裁剪. 第一個和最後一個圖像會被固定在元素(element)的相應的邊上, 同時空白會均勻地分佈在圖像之間. background-position屬性會被忽視, 除非只有一個圖像能被無裁剪地顯示. 只在一種狀況下裁剪會發生, 那就是圖像太大了以致於沒有足夠的空間來完整顯示一個圖像.

  • round 【當前沒有普遍支持】
    隨着容許的空間在尺寸上的增加, 被重複的圖像將會伸展(沒有空隙), 直到有足夠的空間來添加一個圖像. 當下一個圖像被添加後, 全部的當前的圖像會被壓縮來騰出空間. 例如, 一個圖像原始大小是260px, 重複三次以後, 可能會被伸展到300px, 直到另外一個圖像被加進來. 這樣他們就可能被壓縮到225px.關鍵是瀏覽器怎麼計算何時應該添加一個圖像進來, 而不是繼續伸展.

  • no-repeat
    圖像不會被重複(由於背景圖像所在的區域將可能沒有徹底被覆蓋). 那個沒有被重複的背景圖像的位置是由background-position屬性來決定.

• background-size【css3新增】

  定義背景圖片大小
  / 關鍵字 /
  background-size: cover //縮放背景圖片以徹底覆蓋背景區，可能背景圖片部分看不見
  background-size: contain //縮放背景圖片以徹底裝入背景區，可能背景區部分空白

  / 一個值: 這個值指定圖片的寬度，圖片的高度隱式的爲auto /
  background-size: 50% //相對背景區【由background-origin設置】的百分比
  background-size: 3em
  background-size: 12px
  background-size: auto //以背景圖片的比例縮放背景圖片

  / 兩個值: 第一個值指定圖片的寬度，第二個值指定圖片的高度 /
  background-size: 50% auto
  background-size: 3em 25%
  background-size: auto 6px
  background-size: auto auto

  / 逗號分隔的多個值：設置多重背景 /
  background-size: auto, auto / 不一樣於background-size: auto auto /
  background-size: 50%, 25%, 25%
  background-size: 6px, auto, contain

  background-size: inherit
  能夠看MDN提供的例子

• background-position

  設置背景圖像的位置
  background-position: top;
  background-position: bottom;
  background-position: left;
  background-position: right;
  background-position: center;
  background-position: 25% 75%;
  background-position: 0px 0px, center;

• background-attachment

  定義背景圖像的顯示方式。
  background-attachment: scroll;
  background-attachment: fixed;
  background-attachment: local;

  • fixed
    此關鍵字表示背景相對於視口固定。即便一個元素擁有滾動機制，背景也不會隨着元素的內容滾動。

  • local
    此關鍵字表示背景相對於元素的內容固定。若是一個元素擁有滾動機制，背景將會隨着元素的內容滾動， 而且背景的繪製區域和定位區域是相對於可滾動的區域而不是包含他們的邊框。

  • scroll
    此關鍵字表示背景相對於元素自己固定， 而不是隨着它的內容滾動（對元素邊框是有效的）。

【background-origin vs background-clip】

background-clip用來判斷背景是否包含邊框區域.
background-origin是用來決定background-position定位的參考位置。