在網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)置全屏背景圖片可以讓頁(yè)面更加生動(dòng)和有趣。CSS 擁有強(qiáng)大的背景圖片設(shè)置功能，下面我們就來(lái)學(xué)習(xí)如何使用 CSS 設(shè)置全屏背景圖片。 首先，我們需要在 HTML 中添加一個(gè)具有背景圖片的 div 容器。

在 HTML 中添加一個(gè)全屏容器的例子：

<div class="fullscreen"></div>

接下來(lái)，在 CSS 中為 div 容器設(shè)置全屏背景圖片。可以使用 background-image 屬性設(shè)置背景圖片 URL，再使用 background-size 屬性設(shè)置圖片大小為 cover，這樣圖片就會(huì)填充整個(gè)屏幕。同時(shí)，還需要將容器的高度設(shè)置為 100vh （視窗高度）。

CSS 設(shè)置全屏背景圖片的樣例代碼如下：

.fullscreen {
background-image: url("your-image-url.jpg");
background-size: cover;
height: 100vh;
}

除了 background-image 和 background-size 屬性，如果需要調(diào)整背景圖片的位置，可以使用 background-position 屬性。例如，將圖片放置在容器的中心位置：

.fullscreen {
background-image: url("your-image-url.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
}

此外，如果背景圖片的大小與容器不匹配，可以使用 background-repeat 屬性來(lái)控制圖片是否重復(fù)平鋪。

最終的 HTML 和 CSS 代碼如下：

<div class="fullscreen"></div>
.fullscreen {
background-image: url("your-image-url.jpg");
background-size: cover;
background-position: center center;
height: 100vh;
}

通過(guò)上述步驟，我們就可以在網(wǎng)頁(yè)中設(shè)置一個(gè)全屏背景圖片，為網(wǎng)頁(yè)帶來(lái)更加生動(dòng)和有趣的視覺(jué)效果。