1.1 屬性 background-color
屬性 background-color 設定元素的背景顏色。這樣可以設置背景色的填充，提供視覺內容分離和提升文本與其他元素的可讀性。
值：
- 顏色名稱: 可以使用預定義的顏色名稱，如
red,blue,green - 十六進位值: 例如
#ff0000,#00ff00,#0000ff - RGB: 例如
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255) - RGBA: 例如
rgba(255, 0, 0, 0.5)(半透明紅色) - HSL: 例如
hsl(0, 100%, 50%),hsl(120, 100%, 50%),hsl(240, 100%, 50%) - HSLA: 例如
hsla(0, 100%, 50%, 0.5)(半透明紅色)。
使用範例：
CSS
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
HTML
<body>
<div class="color-red">這個元素有紅色背景。</div>
<div class="color-hex">這個元素有以十六進位表示的顏色背景。</div>
<div class="color-rgba">這個元素有半透明的綠色背景。</div>
</body>
代碼解釋：
background-color: red;: 設置元素的紅色背景background-color: #3498db;: 使用十六進位值設置背景顏色background-color: rgba(46, 204, 113, 0.7);: 使用 RGBA 設置半透明綠色背景
1.2 屬性 background-image
屬性 background-image 設定元素的背景圖片。可以使用圖片來創建更具吸引力的背景，提升網頁的設計和視覺感受。
值需要傳遞圖片的 URL - 指定將用作背景的圖片路徑。例如，url('image.jpg')。
使用範例：
CSS
.background-url {
background-image: url('https://via.placeholder.com/150');
width: 150px;
height: 150px;
border: 1px solid #000;
}
HTML
<body>
<div class="background-url">這個元素有背景圖。</div>
</body>
代碼解釋：
background-image: url('https://via.placeholder.com/150');: 設置元素的背景圖片。在這個例子中，使用了圖片的 URL
使用背景圖的優點：
- 視覺吸引力: 使用背景圖片可以創造更具視覺吸引力和趣味性的網頁。
- 上下文: 背景圖片可以提供額外的上下文或信息，增強頁面內容的視覺表現。
- 品牌化: 背景圖片可以是品牌的一部分，幫助保持網站的統一風格和識別度。
使用背景圖的建議：
- 圖像優化: 為了提高頁面性能，重要的是優化圖片，減少它們的大小而不明顯影響質量
- 跨瀏覽器支持: 確保使用的圖片在所有目標瀏覽器中正確顯示
- 替代文本: 對於重要的圖片，應該考慮提供替代的信息傳遞方式，比如文本描述，為有特殊需要的用戶提供便利
1.3 背景顏色和背景圖的聯合使用
屬性 background-color 和 background-image 可以一起使用來創建復雜和吸引人的背景。 例如，可以設置背景顏色，以便在背景圖片未加載時顯示，或者將顏色背景與半透明圖片結合使用。
使用範例：
CSS
.combined-background {
background-color: #3498db;
background-image: url('https://via.placeholder.com/150');
width: 300px;
height: 300px;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid #000;
}
HTML
<body>
<div class="combined-background">
這個元素有結合圖片和背景色的背景。
</div>
</body>
代碼解釋：
background-color: #3498db;: 設置背景顏色background-image: url('https://via.placeholder.com/150');: 設置背景圖片width: 300px;height: 300px;: 設置元素的尺寸color: white;: 設置文字顏色以提高在背景上的可讀性display: flex;align-items: center;justify-content: center;text-align: center;: 將文本置於元素中間border: 1px solid #000;: 為元素添加邊框以突出顯示
GO TO FULL VERSION