2.1 background-position屬性
CSS中的background-position屬性用於設置元素背景圖像的初始位置。
這個屬性可以準確指定背景圖片在元素內的放置位置。可以用background-position
來精細調整背景圖像的顯示，製作更複雜的設計。
background-position語法
background-position屬性接受兩個值，表明背景圖像的水平和垂直位置：
background-position: 水平位置 垂直位置;
如果只指定一個值，則默認第二個值為center。
水平和垂直位置可以具有以下值：
-
關鍵字：
left: 左對齊center: 居中right: 右對齊top: 上對齊bottom: 下對齊
-
百分比值：
- 例如，50% 50%將圖像置於中心
- 百分比值是相對於元素的大小，而不是圖像的大小
-
像素值：
- 例如，10px 20px將圖像定位在左邊10像素和上邊20像素處
-
值的組合：
- 可以組合關鍵字和百分比值，例如，left 50%
2.2 關鍵字
關鍵字：
left,center,right: 水平對齊top,center,bottom: 垂直對齊
關鍵字使用範例
圖像位於左上角：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: left top; /* 圖像位於左上角 */
}
圖像位於中心：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: center center; /* 圖像位於中心 */
}
圖像位於右下角：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: right bottom; /* 圖像位於右下角 */
}
2.3 百分比
百分比值表示圖像相對於元素大小的位置。
百分比用法範例
圖像位於中心：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 50% 50%; /* 圖像位於中心 */
}
圖像位於左上角：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 0% 0%; /* 圖像位於左上角 */
}
圖像位於右下角：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 100% 100%; /* 圖像位於右下角 */
}
2.4 絕對單位 (px, em, rem)
像素或其它絕對單位的值允許精確定位圖像。
圖像位於中心：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: 10px 20px; /* 圖像從左上角向右10像素和向下20像素定位 */
}
div {
background-image: url('path/to/image.jpg');
background-position: 2em 3em; /* 圖像從左上角向右2em和向下3em定位 */
}
2.5 值的組合
你可以結合關鍵字和絕對單位來創建更精確的定位。
值的組合：
CSS
div {
background-image: url('path/to/image.jpg');
background-position: left 20px top 10px; /* 圖像從左上角向右20像素和向下10像素定位 */
}
GO TO FULL VERSION