CSS_background-size用法

Posted on Edited on In

這一篇要介紹的是：background-size 的多種設定方式

教學網站

https://www.w3schools.com/cssref/css3_pr_background-size.asp

Definition and Usage

The background-size property specifies the size of the background images.

有 5 種方式可以設定background-size：（口訣：ACCLP）

  1. “auto”
  2. “cover”
  3. “contain”
  4. length
  • 長寬，兩個值都設定：
    • 第一個值：width
    • 第二個值：height
1
background-size: 300px 100px;
  • 長寬，只設定「一個值」：那個值會是「width」，「height」就會是 “auto”（height 按照原本的長寬比例，自動縮放）
1
background-size: 200px;
  1. percentage

以「佔父元素長寬的比例」來為圖片設定「width, height」

CSS Syntax

1
background-size: auto|cover|contain|length|percentage

[以下分別介紹這 5 種]

（口訣：ACCLP）

auto

  • 是 Default value.
  • 圖片以「原始的長寬」來呈現

css:

1
2
3
4
5
.box{
  background-image: url(https://i.ibb.co/RDFV9t6/iconfinder-instagram-386648.png);
  background-repeat: no-repeat;
  background-size: auto;
}

cover

將圖片 resize 來 cover 住整個容器，圖片可能會被強行縮放，也可能被切掉其中一部份

css:

1
2
3
4
5
.box{
  background-image: url(https://i.ibb.co/RDFV9t6/iconfinder-instagram-386648.png);
  background-repeat: no-repeat;
  background-size: cover;
}

contain

將圖片 resize，以確保在容器內，能夠完整的看到整張圖片

css:

1
2
3
4
5
.box{
  background-image: url(https://i.ibb.co/RDFV9t6/iconfinder-instagram-386648.png);
  background-repeat: no-repeat;
  background-size: contain;
}

length

為圖片設定「width, height」

  • 第一個值：width。第二個值：height

css:

1
2
3
4
5
.box{
  background-image: url(https://i.ibb.co/RDFV9t6/iconfinder-instagram-386648.png);
  background-repeat: no-repeat;
  background-size: 30px 200px;
}

  • 如果只有設定一個值，那個值就是「width」，而「height」則會是"auto 按比例縮放"

css:

1
2
3
4
5
.box{
  background-image: url(https://i.ibb.co/RDFV9t6/iconfinder-instagram-386648.png);
  background-repeat: no-repeat;
  background-size: 30px;
}

percentage

以「佔父元素長寬的比例」來為圖片設定「width, height」

  • 第一個值：width。第二個值：height

css:

1
2
3
4
5
.box{
  background-image: url(https://i.ibb.co/RDFV9t6/iconfinder-instagram-386648.png);
  background-repeat: no-repeat;
  background-size: 50% 100%;
}
  • 圖片的width：佔「父元素寬度」的50%
  • 圖片的height：佔「父元素高度」的100%

  • 如果只有設定一個值，那個值就是「width」，而「height」則會是"auto 按比例縮放"

css:

1
2
3
4
5
.box{
  background-image: url(https://i.ibb.co/RDFV9t6/iconfinder-instagram-386648.png);
  background-repeat: no-repeat;
  background-size: 50%;
}
  • 圖片的width：佔「父元素寬度」的50%
  • 圖片的height：按原始比例縮放

更多範例

兩張背景圖重疊

有兩張背景圖片

  • 第一張「tree.png」，設定為「contain」，才能完整地看到整張圖片
  • 第二張「keyboard.png」，設定為「cover」，才能把整個外圍容器（父元素）給 cover 住
  • 兩個 url 用「逗號」隔開
  • 兩個 background-size 也用「逗號」隔開

css:

1
2
3
4
5
.box{
  background-image: url(tree.png), url(keyboard.png);
  background-repeat: no-repeat;
  background-size: contain, cover;
}

做出「滿版的banner圖」- “hero” image

我的 codepen 範例：https://codepen.io/saffranwang/pen/jRjNNq

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.hero-image{
/*  在 div 插入背景圖片  */
  background-image: url(https://i.ibb.co/z6d3q2h/photographer.jpg);
/*  使用 background-color，萬一圖片無法顯示，至少還有背景顏色  */
  background-color: #cccccc;
/*  這個 div 因為設定了「相對定位」，所以一定要給它「高度」，否則高度會為 0  */
  height: 500px;
/*  讓圖片「不重複」  */
  background-repeat: no-repeat;
/*  讓圖片「置中」  */
  background-position: center;
/*  重新 resize 圖片，讓圖片能夠 cover 住整個 div  */
  background-size: cover;
/*  設定「相對定位」，做為.hero-text的定位點  */
  position: relative;
}

就可以做出像這樣：