CSS背景圖是一種常見的網(wǎng)頁設(shè)計(jì)元素。然而，經(jīng)常會(huì)出現(xiàn)因?yàn)閳D片大小不匹配而顯示不完整的情況。下面是如何使用CSS讓圖片完整顯示的方法。

.background-image {
background-image: url('example.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

在上述代碼中，我們定義了一個(gè)名為background-image的CSS類。我們將我們的圖片鏈接作為背景圖像傳遞給該類。我們使用background-size屬性將圖像大小設(shè)置為容器大小。這將確保圖像與容器的寬高比例相同，并且至少覆蓋整個(gè)容器的較短邊。接下來，我們使用background-repeat: no-repeat和background-position:center將圖像垂直和水平居中并避免重復(fù)。這樣我們就可以確保圖像盡可能完整地顯示在我們的容器中。

如果您想保持圖像的寬高比例，而不是顯示整個(gè)圖像，則可以將background-size設(shè)置為cover。

.background-image {
background-image: url('example.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

這個(gè)CSS類仍然會(huì)將圖像居中并防止圖像重復(fù)，但是如果圖像和容器的寬高比例不同時(shí)，則會(huì)通過裁剪較短的邊來填充整個(gè)容器。這適用于當(dāng)圖像需要填充整個(gè)容器時(shí)，例如我們要做一個(gè)全屏的背景圖像。

總之，CSS背景圖是網(wǎng)頁設(shè)計(jì)中的一個(gè)常見元素。通過定義容器大小和使用一些CSS屬性，我們可以確保圖像完整地顯示在我們的容器中。