認識 CSS 語法 background-image

通常會用來設定背景圖片，用法如下：

<div class="image"></div>

.image{
  height:300px;
  background-image:url("<https://images.unsplash.com/photo-1599978364004-95d0725c5bb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80>")
}

開發時可以使用相對路徑或絕對路徑，不過因為 Codepen 無法載入本地圖片，需透過圖片位址（絕對路徑）

• background-position

  如果圖片太大則會出現這樣的畫面

  

  要調整他的位置可以使用 background-position

  top ｜ bottom ｜ left ｜ right ｜ center

   background-position: center;
  

  

• background-size 但是原圖並沒有這麼大，所以使用 background-size 調整

  auto ｜ contain ｜ cover

  background-size: contain;
  

  

  background-size 改用 cover 查看兩者的差別。

  contain 是在不超過原圖的大小前提下等比縮小 cover 是等比例縮放，讓圖片可以蓋滿元素寬高。

  background-size: cover;
  

  

• background-repeat 背景圖片重複的問題，為了不讓他重複所以要使用 background-repeat 設定

  repeat(預設值)｜ repeat-x ｜ repeat-y ｜ no-repeat

  background-repeat: no-repeat;
  

  

完整程式碼

<div class="image"></div>

.image{
  height:300px;
  background-image:url("<https://images.unsplash.com/photo-1599978364004-95d0725c5bb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80>");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}