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

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

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

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

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

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

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

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

有了這些 CSS 屬性，就可以很方便地處理背景圖片的大小和平鋪問題了。當然，這還只是一些基礎用法，如果需要更進一步的控制，還可以使用其他 CSS 屬性來實現自己想要的效果。