加背景圖片是網(wǎng)頁(yè)美化的重要手段之一，但有時(shí)會(huì)出現(xiàn)背景圖片拉伸的問(wèn)題，導(dǎo)致網(wǎng)頁(yè)失去美感。這篇文章將介紹如何不拉伸背景圖片，并提供相應(yīng)的代碼實(shí)例。 在 CSS 中，我們可以使用 background-size 屬性來(lái)調(diào)整背景圖片的大小。默認(rèn)情況下，背景圖片會(huì)被平鋪（或者稱為重復(fù)），直到填滿整個(gè)背景區(qū)域。但這會(huì)導(dǎo)致圖片被拉伸，從而影響視覺(jué)效果。 那么如何不拉伸背景圖片呢？有兩種方法： 1. 使用 background-repeat 屬性 我們可以將 background-repeat 屬性設(shè)置為 no-repeat，這樣背景圖片就不會(huì)以平鋪的方式填充整個(gè)區(qū)域。這個(gè)方法比較簡(jiǎn)單易懂，但如果圖片的大小和容器的大小不一致時(shí)，圖片可能會(huì)剪切或顯示不全。 示例代碼： ``` p { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; /* 其他樣式 */ } ``` 2. 使用 background-size 屬性 我們可以使用 background-size 屬性，將背景圖片的大小設(shè)置為 cover 或 contain。其中，cover 表示背景圖片被拉伸或縮小，以填充整個(gè)容器；contain 表示背景圖片被縮小或放大，保持原始比例，以充滿整個(gè)容器。 示例代碼： ``` p { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; /* 其他樣式 */ } ``` 需要注意的是，如果使用了 background-size: cover，圖片可能會(huì)被壓縮或拉伸，從而失真。如果使用了 background-size: contain，容器的背景可能會(huì)出現(xiàn)間隙，需要使用 background-position 屬性進(jìn)行調(diào)整。 希望上面的兩種方法能夠幫助你解決背景圖片拉伸的問(wèn)題，讓你的網(wǎng)頁(yè)更加美觀。