CSS 程式札記 : 背景 background

背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。

CSS 背景基礎：背景顏色和圖片

背景顏色（background-color）

你可以幫網頁元素設定背景顏色，以下是背景顏色設置的範例。

.element {
    background-color: #ff5733; /* 指定一個顏色代碼 */
}

你可以使用十六進制（#ff5733）、RGB（rgb(255, 87, 51)）、RGBA（rgba(255, 87, 51, 0.5)）等多種方式來指定顏色。

背景圖片（background-image）

除了純色背景，你還可以使用圖片作為背景。

.element {
    background-image: url('image.jpg'); /* 指定背景圖片 */
}

CSS 背景進階：重複、定位和大小

背景重複（background-repeat）

背景圖片可以設定為重複，以填滿整個元素區域。使用的值是 repeat（水平和垂直重複）、repeat-x（只水平重複）、repeat-y（只垂直重複）和 no-repeat。

.element {
    background-repeat: no-repeat; /* 設定背景圖片不重複 */
}

背景定位（background-position）

背景圖片的位置可以通過 background-position 進行調整。你可以使用具體的值（如像素或百分比）來控制位置。

.element {
    background-position: 50% 50%; /* 將背景圖片置於元素的中央 */
}

背景大小（background-size）

background-size 可以讓你控制背景圖片的大小。使用的值是 cover（覆蓋整個元素區域）和 contain（確保圖片完整顯示在元素內）。

.element {
    background-size: cover; /* 背景圖片覆蓋整個元素 */
}

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡