background-image如何實(shí)現(xiàn)全屏背景

小樊
452
2024-06-17 19:42:58

要實(shí)現(xiàn)全屏背景，可以使用CSS的background-image屬性結(jié)合background-size屬性來(lái)實(shí)現(xiàn)。以下是一個(gè)示例代碼：

body {
    margin: 0;
    padding: 0;
    background-image: url('background-image.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

在上面的代碼中，background-image屬性設(shè)置背景圖片的URL，background-size屬性設(shè)置背景圖片的尺寸為cover，讓背景圖片完全覆蓋整個(gè)屏幕。background-repeat屬性設(shè)置為no-repeat，防止背景圖片重復(fù)顯示。background-attachment屬性設(shè)置為fixed，使背景圖片固定在屏幕上，不會(huì)隨著頁(yè)面滾動(dòng)而移動(dòng)。

這樣，就可以實(shí)現(xiàn)一個(gè)全屏背景。

0 踩