CSS背景圖填充全屏是網頁設計中常見的一種效果。下面是一些實現該效果的方法。
1. 使用background-size屬性
body { background-image: url('bg.jpg'); background-size: cover; /*或者是:background-size: 100% 100%;*/ }
該方法使用background-size屬性的cover值或者用100% 100%作為值,可以使背景圖片填充整個屏幕。但是,如果背景圖片的寬高比不同于屏幕的寬高比,圖片就會被拉伸或者壓縮變形,從而導致效果不佳。
2. 使用background-attachment屬性
body { background-image: url('bg.jpg'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; /*或者是:background-size: 100% 100%;*/ }
該方法使用background-attachment屬性,可以讓背景圖片固定在屏幕上方,使得滾動頁面時整個頁面都是以背景圖作為背景。但是,由于圖片是固定在屏幕上方的,當屏幕太小或者圖片太大時,可能導致圖片無法完全顯示。
3. 使用絕對定位和z-index屬性
body { position: relative; width: 100%; height: 100%; } #bg { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-image: url('bg.jpg'); background-size: cover; background-repeat: no-repeat; }
該方法使用絕對定位和z-index屬性來實現背景圖填充全屏。首先,父元素需要設置寬高為100%,然后背景圖需要被設置成一個絕對定位的子元素,并且z-index屬性需要設置成一個負值,來將背景圖放置在內容的下面。此時,背景圖就能填充整個屏幕了。
以上是幾種常見的實現CSS背景圖填充全屏的方法。根據實際需求和圖片大小、比例等因素,需要選擇合適的方法。
上一篇css背景圖顯示不出來
下一篇css背景圖有點變形