在設計網頁時,背景圖是非常重要的元素。如何將背景圖全屏展示呢?這就需要用到CSS樣式了。下面介紹兩種方法。
方法一:使用background-size屬性
body{ background: url(bg.jpg) no-repeat center center fixed; background-size: cover; }
其中,bg.jpg是你想要設置的圖片文件名。background-size屬性設置為cover時,背景圖會自動縮放至鋪滿整個屏幕。
方法二:使用CSS3的vh和vw單位
body{ background-image:url(bg.jpg); background-size:100vw 100vh; background-attachment:fixed; }
vh和vw分別代表視口的高度和寬度,100vw和100vh就等于整個視口的高度和寬度,因此設置背景圖尺寸為100vw 100vh即可實現全屏展示。background-attachment屬性設置為fixed可以讓背景圖保持在視口中不隨滾動條滾動。