3.1 屬性 background-repeat
在CSS中，屬性background-repeat和background-size用來控制背景圖片在元素中的重複和縮放方式。這些屬性提供了網頁開發者靈活的工具來創建視覺上吸引的背景。讓我們來仔細看看它們。
屬性background-repeat定義了背景圖片在元素中的重複方式。預設情況下，背景圖片會在水平方向和垂直方向上重複。
值
repeat: 圖片在水平方向和垂直方向上重複（預設）repeat-x: 圖片只在水平方向上重複repeat-y: 圖片只在垂直方向上重複no-repeat: 圖片不重複
1. 值 repeat:
圖片在水平方向和垂直方向上重複。
CSS
.repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat;
border: 1px solid #000;
}
HTML
<div class="repeat">水平和垂直重複</div>
2. 值 repeat-x:
圖片在水平方向上重複。
CSS
.repeat-x {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-x;
border: 1px solid #000;
}
HTML
<div class="repeat-x">僅在水平方向重複</div>
3. 值 repeat-y:
圖片在垂直方向上重複。
CSS
.repeat-y {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-y;
border: 1px solid #000;
}
HTML
<div class="repeat-y">僅在垂直方向重複</div>
4. 值 no-repeat:
圖片不重複。
CSS
.no-repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: no-repeat;
border: 1px solid #000;
}
HTML
<div class="no-repeat">不重複</div>
解釋程式碼
.repeat: 圖片在水平方向和垂直方向上重複，填滿整個元素.repeat-x: 圖片僅在水平方向重複.repeat-y: 圖片僅在垂直方向重複.no-repeat: 圖片不重複，僅顯示一次
3.2 屬性 background-size
屬性background-size控制背景圖片的大小。它允許調整圖片的尺寸，以便更好地適應元素。
值:
auto: 圖片的大小自動決定（預設）cover: 圖片縮放以完全覆蓋元素，保留比例contain: 圖片縮放以完整適應元素，保留比例- 絕對值: 例如，100px 50px，設定圖片的寬度和高度為像素值
- 百分比值: 例如，50% 50%，設定圖片的寬度和高度為元素大小的百分比
1. 預設大小 (auto):
圖片的大小是自動決定的（預設）。
CSS
.size-auto {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-size: auto;
border: 1px solid #000;
}
HTML
<div class="size-auto">預設大小 (auto)</div>
2. cover:
圖片縮放以完全覆蓋元素，保留比例。
CSS
.size-cover {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: cover;
border: 1px solid #000;
}
HTML
<div class="size-cover">縮放至覆蓋元素 (cover)</div>
3. contain:
圖片縮放以完整適應元素，保留比例。
CSS
.size-contain {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: contain;
border: 1px solid #000;
}
HTML
<div class="size-contain">縮放至完全適應 (contain)</div>
4. 絕對值:
例如，100px 50px，設定圖片的寬度和高度為像素值。
CSS
.size-pixels {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 100px 50px;
border: 1px solid #000;
}
HTML
<div class="size-pixels">像素大小 (100px 50px)</div>
5. 百分比值:
例如，50% 50%，設定圖片的寬度和高度為元素大小的百分比。
CSS
.size-percent {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 50% 50%;
border: 1px solid #000;
}
HTML
<div class="size-percent">百分比大小 (50% 50%)</div>
解釋程式碼:
.size-auto: 圖片的大小自動決定.size-cover: 圖片縮放以完全覆蓋元素，保留比例。部分圖片可能被裁剪.size-contain: 圖片縮放以完整適應元素，保留比例。圖片會完全顯示，但可能有空白區域.size-pixels: 圖片大小以像素為單位設定（寬100px和高50px）.size-percent: 圖片大小以元素大小的百分比設定（寬50%和高50%）
3.3 一起用 background-repeat 和 background-size
屬性background-repeat和background-size經常一起使用，以達到期望的背景圖像顯示效果。
使用範例:
CSS
.combined {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-size: cover;
border: 1px solid #000;
}
HTML
<body>
<div class="combined">背景圖片不重複並縮放至覆蓋元素</div>
</body>
解釋程式碼:
background-repeat: no-repeat;: 圖片不重複background-size: cover;: 圖片縮放以完全覆蓋元素，保留比例。部分圖片可能被裁剪
GO TO FULL VERSION