在CSS中,要實現將圖片置于頁面底部,我們可以使用position和bottom兩個屬性。
img { position: absolute; bottom: 0; }
這樣就可以將圖片放置在頁面底部了。
但是需要注意的是,如果頁面內容太少,圖片可能會被完全覆蓋,為了解決這個問題,我們可以為頁面添加一些高度。
body { min-height: 100vh; }
這樣,即使頁面沒有太多內容,圖片也會被放置在頁面底部以上,不會被完全覆蓋。
除了以上方法,還可以使用flex布局來實現圖片置底。
body { display: flex; flex-direction: column; min-height: 100vh; } img { margin-top: auto; }
這里我們將body設置為flex布局,并且使用flex-direction: column將元素垂直排列,再使用margin-top: auto將圖片向底部推動。
以上兩種方法任選其一即可實現在CSS中將圖片置于頁面底部。