CSS 圖片怎樣不平鋪？ 在網(wǎng)頁(yè)設(shè)計(jì)中，使用圖片來(lái)裝飾網(wǎng)頁(yè)是非常常見(jiàn)的一種方式。但是，在使用圖片時(shí)，可能會(huì)遇到一些問(wèn)題，其中之一就是圖片平鋪。當(dāng)我們希望圖片在網(wǎng)頁(yè)中只顯示一張，而不是在整個(gè)頁(yè)面背景上平鋪時(shí)，該怎么做呢？接下來(lái)讓我們來(lái)看一下如何使用 CSS 來(lái)實(shí)現(xiàn)不平鋪的效果。 首先，我們需要將圖片作為背景設(shè)置在元素上。這可以通過(guò) CSS 中的 background-image 屬性來(lái)實(shí)現(xiàn)。例如，我們有一個(gè) div 元素，需要將一張名為 "example.jpg" 的圖片設(shè)置為其背景，代碼如下：

<div class="example"></div>
.example {
background-image: url("example.jpg");
}

上述代碼將背景圖片設(shè)置為 div 元素的背景，但是默認(rèn)情況下，這張圖片會(huì)平鋪在整個(gè)元素上，無(wú)論元素有多大。為了不讓圖片平鋪，我們可以使用 CSS 的 background-repeat 屬性，并將其設(shè)置為 no-repeat。代碼如下：

.example {
background-image: url("example.jpg");
background-repeat: no-repeat; /* 不平鋪 */
}

這樣，背景圖片就不會(huì)在元素上平鋪了。但是，有時(shí)候還會(huì)出現(xiàn)這樣的問(wèn)題，圖片雖然不再平鋪，但是可能會(huì)被拉伸或者裁剪。這時(shí)，我們可以使用 CSS 的 background-size 屬性來(lái)控制背景圖片的大小。代碼如下：

.example {
background-image: url("example.jpg");
background-repeat: no-repeat; /* 不平鋪 */
background-size: contain; /* 圖片盡量顯示全 */
}

在上述代碼中，我們將 background-size 屬性設(shè)置為 contain，這樣圖片就會(huì)盡量顯示全，但是可能會(huì)出現(xiàn)留白的情況。如果要讓圖片充滿整個(gè)元素背景，我們可以將 background-size 設(shè)置為 cover。代碼如下：

.example {
background-image: url("example.jpg");
background-repeat: no-repeat; /* 不平鋪 */
background-size: cover; /* 圖片充滿整個(gè)div元素 */
}

有了這些 CSS 屬性，就可以很方便地處理背景圖片的大小和平鋪問(wèn)題了。當(dāng)然，這還只是一些基礎(chǔ)用法，如果需要更進(jìn)一步的控制，還可以使用其他 CSS 屬性來(lái)實(shí)現(xiàn)自己想要的效果。