CSS背景圖鋪滿6是很常見的需求,可以通過以下幾種方法實現:
/* 方法一:使用background-size */ background: url('image.jpg') no-repeat center center fixed; background-size: cover; /* 方法二:使用vw和vh單位 */ background: url('image.jpg') no-repeat; background-size: 100vw 100vh; /* 方法三:使用html和body標簽來填充整個屏幕 */ html, body { height: 100%; } body { margin: 0; background: url('image.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
其中,方法一和方法二使用了CSS3的屬性background-size,可以讓背景圖完全覆蓋整個元素。方法三則是對html和body標簽進行全屏填充,也能有效實現背景圖鋪滿6的效果。
需要注意的是,背景圖可能會拉伸或壓縮導致失真。因此,應選擇高質量的圖片,并將其尺寸優化到合適的大小,以減輕頁面加載時間。