CSS 中背景圖片置底部的實現 當我們為網頁設計自定義的背景圖片時，往往希望圖片自適應內容的大小，而不是被平鋪到整個頁面，影響用戶的視覺效果。于此，我們可以使用 CSS 的 background-size 屬性實現圖片自適應，但是默認情況下，圖片的位置是在網頁頂部，而非底部。 那么，在 CSS 中如何實現背景圖片置底呢？ 1. 將頁面設置為固定高度 首先，需要明確頁面的高度，可以使用 height 或 min-height 等屬性指定。 然后，在 CSS 中定義背景圖像的位置 position 為 fixed，這樣保證頁面的高度不會影響背景圖片的位置。 最后，將背景圖像的垂直位置設為底部，即設置屬性 background-position 為 center bottom。 例如：

p {
height: 1000px;
position: relative;
}
body {
background-image: url('your-image.jpg');
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
height: 100%;
width: 100%;
}

2. 使用背景容器 為了避免影響頁面布局，我們還可以將背景圖片置于一個容器中，而不是直接應用于 body 元素。 容器需要固定高度，并將其背景圖片設置為固定位置且不重復。然后，將內容容器通過 margin 或 padding 向上移動圖片高度的距離，以使背景圖片置于底部。 例如：

.container {
background-image: url('your-image.jpg');
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
height: 800px;
position: relative;
}
.content {
padding-bottom: 200px; /* 圖片高度 */
position: relative;
z-index: 1;
}

總結 以上兩種方法都有其優點和應用場景，根據實際需求選擇即可。如果使用第一種方法，需要注意在調整頁面高度時，也要相應調整背景圖像的位置和大小。使用第二種方法則需要為背景容器和內容容器設置正確的樣式，以避免布局出現問題。 在實現過程中，可以通過調節 background-position 和 background-size 等屬性的值，以及對容器元素的調整，來達到所需的美觀效果。