(2) CSS 基礎篇-background-image

發表於 更新於 分類於
用background-image設定背景圖片

background-image

background-image 可以設定一張或多張的圖片，寫法如下:

1
2
3
.box {
  background-image: url('tim.png');
}

背景圖片的設定，在不控制大小的情況下，預設就是原始圖片大小，且圖片僅會顯示在區塊的範圍內，也就是說當圖片太大張的時候，圖片將會發生裁切的情形。另外，當同時設定了background-color與background-image的時候，background-image將會蓋住background-color。

background-image支援的值有以下幾種

  • url( )
  • linear-gradient( )
  • radial-gradient( )
  • repeating-linear-gradient( )
  • repeating-radial-gradient()
  • Inital
  • Inherit

url() 設定

url所要撰寫的是圖片檔案所在的位置，可使用

多重背景功能

多重背景

可以寫入多張背景圖的url，並在每個url之間使用了逗號做區隔，要注意

  1. 背景圖片的堆疊是按照順序的，先寫的則顯示在前，後寫的顯示在後，依序堆疊
  2. 背景圖片設定不要重複(background-repeat: no-repeat;)
  3. 背景圖片的位置設定要錯開(position)

漸層背景設定

1
background-image: linear-gradient(起始色彩, 結束色彩);

指定方向漸層

漸層設定

  • to top (下方漸層到上方)
  • to right (左方漸層到右方)
  • to bottom (上方漸層到下方)
  • to left (右方漸層到左方)
  • to top left (右下漸層到左上)
  • to top right (左下漸層到右上)
  • to bottom right (左上漸層到右下)
  • to bottom left (右上漸層到左下)

漸層設定

或直接寫(60deg,起始顏色，結束顏色)

背景重複設定

  1. background-repeat: no-repeat
  2. background-repeat: repeat-x (水平方向位移)
  3. background-repeat: repeat-y(垂直方向位移)