CSS 背景寬高自適應是一項非常實用的技術,可以使我們的網頁在不同的屏幕尺寸下仍然保持一致的外觀。下面我們來介紹如何實現 CSS 背景寬高自適應:
/* HTML */ <div class="bg"></div> /* CSS */ .bg { position: relative; width: 100%; height: 0; padding-bottom: 50%; /* 背景高度為寬度的一半 */ background: url(bg.jpg) no-repeat center center / cover; /* 背景圖片居中并自適應 */ }
如上所述,我們需要給 div 元素一個背景圖片,同時保證它能夠自適應不同的屏幕尺寸。首先,我們將 div 的寬度設為 100% ,而高度則設為 0 ,同時為了保證背景圖片的寬高比例不變,我們使用了一個 padding-bottom 值為寬度的一半。這樣一來,我們的 div 元素就能自適應不同的屏幕尺寸,同時背景圖片也能夠在其內部居中并自適應。
當然,如果你想自定義背景圖片的位置和大小,你可以直接修改 background 的屬性值,這里的 cover 表示讓圖片盡可能地覆蓋整個 div 元素。
總之,使用 CSS 背景寬高自適應技術可以讓我們的網頁在不同的設備上都有良好的顯示效果,這是一種非常實用的技術。