在網頁設計中，背景圖片是經常使用到的元素之一。然而，有時候我們希望背景圖片在不失真的情況下不拉伸，怎么實現呢？ 首先，我們需要在CSS中指定背景圖的大小，可以使用background-size屬性來實現。如果我們想讓背景圖片不失真且大小不變，可以使用background-size屬性的值"auto"，如下代碼所示：

p {
background-image: url("path/to/image.jpg");
background-repeat: no-repeat;
background-size: auto;
}

這樣，背景圖片就會以原本的大小呈現，不拉伸也不失真。但是，這樣的背景圖片可能會被裁剪，如果我們想讓圖片完整地顯示出來，可以使用background-position屬性來控制圖片的位置，如下代碼所示：

p {
background-image: url("path/to/image.jpg");
background-repeat: no-repeat;
background-size: auto;
background-position: center center;
}

這樣，背景圖片就會在p標簽的中央完整地顯示出來，而且不會被拉伸。 除了使用"auto"以外，我們還可以使用"cover"和"contain"來控制背景圖片的大小。"cover"表示將圖片縮放到能完全覆蓋背景區域，可能會被裁剪，而"contain"則表示將圖片縮放到能夠完整地顯示在背景區域內，不會被拉伸或裁剪。 綜上所述，通過設置background-size屬性的值，我們可以輕松地控制背景圖片的大小，讓其在不失真的情況下不被拉伸。如果你還想要更多的控制，可以使用background-position屬性來調整圖片的位置。