CSS圖片左右鋪滿是一個常用的布局技巧,可以讓兩張圖片分別覆蓋頁面的左側(cè)和右側(cè),實現(xiàn)頁面美觀大方。
.left-image{ position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background-image: url(left.jpg); background-size: cover; } .right-image{ position: absolute; top: 0; bottom: 0; right: 0; width: 50%; background-image: url(right.jpg); background-size: cover; }
上述代碼中,我們使用了position屬性將圖片定位為絕對位置,使其覆蓋到頁面上方。接下來使用top、bottom、left和right屬性將左邊圖片的寬度設(shè)置為50%,并定位在頁面的左側(cè)。同時,將右側(cè)圖片的寬度也設(shè)置為50%,并定位在頁面的右側(cè)。最后,利用background-image和background-size屬性將圖片在位置上撐滿整個屏幕。
通過使用這種方法,我們可以輕松地實現(xiàn)簡潔明快的布局效果,使網(wǎng)站內(nèi)容更加突出,無形中提高用戶的瀏覽體驗。