【div css背景縮放】 在 Web 開發(fā)中，背景圖片的使用是很常見的。而對于不同的設(shè)備和屏幕尺寸，背景圖片的大小和尺寸也需要動態(tài)適配。當(dāng)使用 div 元素作為背景容器時，我們可以使用 CSS3 中的 background-size 屬性來實現(xiàn)背景縮放。 【基本語法】 div { background-image: url('img.png'); background-size: 100% 100%; } background-size 屬性通常有兩種寫法：第一種是直接寫出縮放后的寬度和高度，格式為：background-size: 寬度 高度；例如，background-size: 200px 100px; 第二種寫法是寫出百分比形式的寬度和高度，格式為：background-size: 寬度百分比 高度百分比；例如，background-size: 100% 100%。一般來說，我們會使用相對值百分比，以便更好地適配不同尺寸的屏幕。 【背景覆蓋模式】 如果縮放后的背景圖片與 div 元素的寬高比例不一致，就會產(chǎn)生背景圖像縮放后的覆蓋模式。當(dāng)圖片長寬比例與容器不一樣時，圖片自由縮放并鋪滿整個容器。在這種情況下，可能會出現(xiàn)一些不必要的滾動條或者圖片留白的現(xiàn)象。 為了避免這種情況，我們可以調(diào)整背景的覆蓋模式，即 CSS3 中的 background-size 屬性的第二個參數(shù)。默認(rèn)情況下是 cover，表示盡可能填充整個容器，將圖片覆蓋完整。而 contain 表示放大或者縮小背景圖片以顯示完整內(nèi)容，不會覆蓋整個容器，留下的部分會以背景顏色填充。 【代碼示例】 .pre { background-image: url('img.png'); background-size: 100% 100%; } .pre1 { background-image: url('img.png'); background-size: contain; } 以上是對 div css 背景縮放的簡單介紹，希望對大家有所幫助。使用 background-size 屬性可以讓我們更好地控制背景圖片的縮放和適應(yīng)，提高頁面的視覺效果。如果您想更深入地了解 CSS3 的這種屬性，可以多去嘗試一些不同的設(shè)置，找到最適合你網(wǎng)站的背景縮放方案。