CSS圖片布滿全屏是一種很常見的網站設計技巧,它能讓你的網站更吸引人、更有活力。下面就是一段用CSS讓圖片布滿全屏的代碼示例:
html, body { margin: 0; padding: 0; height: 100%; } .image-bg { position: relative; height: 100%; background: url(/path/to/image.jpg) top center no-repeat; background-size: cover; }
在這個示例中,我們使用了一個容器元素(這里是一個class為image-bg
的div)來包裹我們的圖片并將其鋪滿整個瀏覽器窗口。我們還給了這個div元素一個相對位置,并給其設置了一個高度,讓其充滿整個瀏覽器窗口。
接下來,我們設置了背景圖片的路徑,這個路徑指向了我們需要鋪滿全屏的圖片。我們使用了CSS的background屬性來進行背景圖的設置,并使用了top
和center
屬性來使圖片出現在窗口的頂端中心位置。
最后,我們使用了background-size屬性來設置背景圖片的大小,使背景圖片充滿整個div元素。這樣,我們就能夠通過這些簡單的CSS代碼將圖片鋪滿瀏覽器窗口了。
下一篇css圖片左邊無間隙