前言
背景屬性?
| 屬性 | 說明 |
|---|---|
| background-color | 背景顏色 |
| background-image | 背景圖 |
| background-repeat | 背景圖平鋪方式 |
| background-position | 背景圖位置 |
| background-size | 背景圖縮放 |
| background-attachment | 背景圖固定 |
| background | 背景復合屬性 |
背景顏色
可以使用background-color屬性來設置背景顏色。
示例：
1.使用顏色關鍵字：直接使用預定義的顏色名稱來設置背景顏色。
.element {background-color: green; /* 綠色 */
}2.使用十六進制值：使用紅、綠、藍三原色的十六進制來指定顏色。
.element {background-color: #ff000f; /* 紅色 */
}3.使用RGB值：使用紅、綠、藍三原色的整數值來指定顏色。
.element {background-color: rgb(0, 255, 0); /* 綠色 */
}
4.使用RGBA：類似于RGB值，還可以通過添加第四個參數來指定透明度。
.element {background-color: rgba(11, 65, 212, 0.5); /* 淡藍色 */
}上述示例中.element是要應用背景顏色的元素選擇器。?
預覽：
背景圖
可以使用background-image屬性來指定一個圖像作為元素的背景圖。
以下是一種基本的設置背景圖像的方式：
.element {background-image: url("image.jpg");
}上面示例中，.element 是要應用背景圖像的元素選擇器，url("image.jpg")是指向你要使用的圖像的路徑。
預覽：
背景圖平鋪方式
可以使用background-repeat屬性來設置背景圖的平鋪方式。下面是常見的屬性值：
| 屬性值 | 說明 |
|---|---|
| repeat | 默認值，當圖像尺寸小于元素尺寸時，會水平和垂直方向上重復平鋪圖像。 |
| repeat-x | 圖像僅在水平方向上重復平鋪，垂直方向不會重復。 |
| repeat-y | 圖像僅在垂直方向上重復平鋪，水平方向不會重復。 |
| no-repeat | 圖像不會被平鋪，只會顯示一次。 |
示例：
1.背景圖不進行平鋪，只顯示一次：
.element {background-repeat: no-repeat;
}預覽：
2.背景圖只在水平方向上重復平鋪：
.element {background-repeat: repeat-x;
}預覽：
背景圖位置
可以使用background-position屬性來設置背景圖像的位置。這個屬性可以接受不同的值，用于指定圖像在元素中的起始位置。
下面是一些常見的取值方式：
1.關鍵字：
| 關鍵字 | 位置 |
|---|---|
| left | 左側 |
| right | 右側 |
| center | 居中 |
| top | 頂部 |
| bottom | 底部 |
?示例：
將圖像置于頂部居中：
.element {background-position: top center;
}預覽：
2.坐標：使用像素（px）單位指定水平或垂直方向上的偏移量。在水平方向，正數向右，負數向左；在垂直方向，正數向下，負數向上。
示例：
將圖像向右偏移20像素，向下偏移30像素：
.element {background-position: 20px 30px;
}預覽：
背景圖縮放
可以使用background-size屬性來控制背景圖像的縮放方式。這個屬性允許你調整背景圖像的尺寸以適應元素的大小。
以下是一些常見的取值方式：
1.關鍵字：
| 關鍵字 | 說明 |
|---|---|
| auto | 默認值，保持圖像的原始尺寸。如果圖像比元素大，在默認情況下會被裁剪。 |
| cover | 按比例縮放圖像，使其完全適應元素的背景區域。可能會裁剪圖像的某個區域。 |
| contain | 按比例縮放圖像，使其完全適應元素的背景區域。可能會出現空白區域，不會進行裁剪。 |
示例：
1）圖像不平鋪情況下預覽：
2）將背景圖像完全適應元素的背景區域，不進行裁剪：
.element {background-size: contain;
}預覽：
3）按比例縮放圖像，使其覆蓋整個元素的背景區域：
.element {background-size: cover;
}預覽：
2.百分比：使用百分比來設置圖像的寬度和高度相對于元素大小的比例。
示例：
將圖像的寬度設為元素寬度的50%，高度設為元素高度的75%：
.element {background-size: 50% 75%;
}?預覽：
3.長度：使用具體的長度值來設置圖像的寬度和高度。
示例：
將圖像寬度設為150像素，高度設為150像素：
.element {background-size: 150px 150px;
}預覽：
背景圖固定
可以使用background-attachment屬性來控制背景圖像是否固定在視口中，以實現固定背景圖像效果。
常用取值：
| 關鍵字 | 說明 |
|---|---|
| scroll | 默認值，背景圖像會隨頁面滾動而滾動。 |
| fixed | 背景圖固定在視口中，不會隨頁面滾動而移動。 |
示例：
.element {background-attachment: fixed;
}可以實現背景圖像固定，而內容隨頁面滾動而移動，如下所示：
背景圖復合屬性
可以使用background屬性來同時設置多個背景相關屬性。
語法：
空格隔開各個屬性值，不區分順序。
background: <背景色> <背景圖像> <背景平鋪方式> <背景縮放/背景位置> <背景固定>;示例：
.element {background: red url("../images/小丑.jpg") no-repeat right center/cover;
}
)
: invalid next size)
