背景

我們之前介紹 CSS 顏色時有說過 background-color 可以指定元素的背景顏色，但其實在背景中除了顏色外我們還能做更多變化，下面就讓我們花點篇幅看看背景相關的屬性吧。

背景顏色 background color

• 屬性名：background-color
• 屬性值：顏色 (包含關鍵字、色碼、漸層等)

範例：

background-color: red;
background-color: rgb(144, 0, 255);

背景圖片 background image

• 屬性名：background-image
• 屬性值：url("路徑");

範例：

/* 絕對位置 */
background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");

/* 相對位置 */
background-image: url("./img/01.png");

背景大小 background size

• 屬性名：background-size
• 屬性值：auto (圖片原本大小)、cover (背景圖片填滿容器)、contain (顯示完整圖片)、直接設定圖片寬高

background-size 讓我們可以指定背景圖片的大小，不過在使用的時候也要注意圖片比例與元素是否相同，若不同時仍設定寬高百分比則容易造成圖片變形。

範例：

.color1 {
    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");
    background-size: auto;
}
.color2 {
    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");
    background-size: cover;
}
.color3 {
    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");
    background-size: contain;
}
.color4 {
    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");
    background-size: 100% 100%;
}

結果：

(圖片來自 Nike 官網)

背景重複 background repeat

• 屬性名：background-repeat
• 屬性值：repeat (預設，圖片依 x, y 軸重複)、repeat-x (背景圖片沿 x 軸重複)、repeat-y (背景圖片沿 ｙ 軸重複)、no-repeat (不重複)

當背景圖片小於元素時，會預設重複直到填滿整個元素的範圍，而 background-repeat 則可以指定是否重複及重複方向。

範例：

.color1 {
    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");
    background-size: 65px;
}
.color2 {
    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");
    background-size: 65px;
    background-repeat: repeat-x;
}
.color3 {
    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");
    background-size: 65px;
    background-repeat: repeat-y;
}
.color4 {
    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");
    background-size: 65px;
    background-repeat: no-repeat;
}

結果：

背景原點 background origin

• 屬性名：background-origin
• 屬性值：padding-box (預設，以 padding 區左上角為原點)、border-box (以 border 區左上角為原點)、content-box (以內容區左上角為原點)

範例：
下圖是一個同時有 border、padding、及 content 的元素，可以很明顯看出三種值的不同

背景位置 background position

• 屬性名：background-position
• 屬性值：水平方向 (left、center、right)、垂直方向 (top、center、bottom)、CSS 長度單位

background-position 主要用來指定背景圖片的對齊方式，語法為 background-position: 水平對齊方式 垂直對齊方式，預設為左上 (也就是 left top)。屬性值除了使用方向關鍵字外也可以填入百分比、絕對單位，這時背景會以原點 (baground-origin) 為參考點進行偏移。

範例：

.color1 {
    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");
    background-size: 65px;
    background-repeat: no-repeat;
    background-position: right bottom;
}
.color2 {
    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");
    background-size: 65px;
    background-repeat: no-repeat;
    background-position: 15px 30px;
}
.color3 {
    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");
    background-size: 65px;
    background-repeat: no-repeat;
    background-position: 15% 30%;
}
.color4 {
    background-image: url("https://static.nike.com/a/images/f_auto/dpr_2.0,cs_srgb/h_500,c_limit/0be0563b-b21a-4b09-acd8-eef45f88fe5a/nike-%E5%AE%98%E6%96%B9%E5%95%86%E5%BA%97.png");
    background-size: 65px;
    background-repeat: no-repeat;
    background-position: center;
}

結果：
水平垂直置中因為寫法為 center center，所以可簡寫為 center

背景裁剪 background clip

• 屬性名：background-clip
• 屬性值：border-box (預設，裁剪邊框區域以外的背景)、padding-box (裁剪 padding 區以外的背景)、content-box (裁剪內容區以外的背景)、text (裁剪文字範圍外的背景)
• 對背景顏色及背景圖片皆有效
• 裁剪指定區域以外的背景指的是在 box model 中由內到外的順序，例如 padding-box 會裁剪 border 範圍和元素外的背景，只保留在 padding 區和 content 區的背景
• text 裁剪文字區外的背景需在文字顏色設定為透明 (transparent) 時才有效

範例：

.box1 {
    background-clip: border-box;
}
.box2 {
    background-clip: padding-box;
}
.box3 {
    background-clip: content-box;
}
.box4 {
    -webkit-background-clip: text; /* 由於 text 為實驗性用法，必須在前面加入瀏覽器前綴 */
}

背景 background

• 屬性名：background
• 屬性值：是所有背景相關屬性的複合屬性，可指定背景顏色、圖片、位置、重複方向等值

語法:

background: 背景顏色 背景圖片 重複 圖片位置 / 大小 原點 背景剪切;

範例：

background: green; /* 只指定顏色 */
background: lightblue no-repeat bottom right url("./img.png"); /* 指定顏色、圖片、重複、位置 */

滑鼠相關屬性

cursor

cursor 可以設定滑鼠移到該元素上方時游標的樣式。

• 屬性名：cursor
• 屬性值：pointer (最常見)、crosshair (十字)、text (input 樣式)、move、wate 等
• 在開發中最常見的是將自定的 button 加入 cursor: pointer 呈現小白手手的樣式
• cursor 也支援自訂樣式，只要將屬性值替換為圖片連結即可，如 url("./img.png")

更多滑鼠樣式可以參考：MDN Cursor

上一篇：[快速入門前端 23] CSS 常見屬性(3) 邊框、表格及列表屬性
下一篇：[快速入門前端 25] HTML 元素的 Display 方式
系列文章列表：[快速入門前端] 系列文章索引列表