在 CSS background 背景設計系列中，包含許多重要屬性，例如用來設計網頁背景顏色的 background-color、顯示背景圖片的 background-image、設定背景位置的background-position 等，都是許多設計師常用到的屬性。熟悉這些屬性後，就能夠很輕鬆的設計出單純色彩的網頁背景風格，也可以搭配高質感網頁背景圖片來呈現整體網頁視覺效果。以下將幾個常用的 CSS background 屬性進行介紹~
background-color 屬性用來設定元素的背景顏色，再複習一下上次講的color，這邊一樣可以使用英文顏色、16進位碼、RGB和HSL來替背景上顏色，我這次分別使用金色(英文顏色)，橘紅色(16進位碼)，天藍色(RGB)和鮮綠色(HSL)來示範
html
<div class="color-keyword">英文顏色 (gold)</div>
<div class="color-hex">16進位碼 (#FF5733)</div>
<div class="color-rgb">RGB (rgb(51, 153, 255))</div>
<div class="color-hsl">HSL (hsl(120, 70%, 45%))</div>
css
.color-keyword {
background-color: gold;
}
.color-hex {
background-color: #FF5733;
}
.color-rgb {
background-color: rgb(51, 153, 255);
}
.color-hsl {
background-color: hsl(120, 70%, 45%);
}
此外我們也可以使用圖片作為元素的背景，透過 url() 函數來指定圖片的路徑，若要達成 填滿背景圖不重複且置中和自動縮放以完全覆蓋整個<body>的背景圖效果，需要組合使用多個 background 相關屬性。以下程式碼將在 <body> 元素上應用一張黑色貓咪的背景圖
語法: background-image: url('背景圖片網址');
body {
background-image: url('a block cat.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
iThome鐵人賽
看影片追技術