想讓整個介面有一個背景圖片,自然想到的是在body上加background,程式碼如下:
body { width:100%; height: 100%; /* 加载背景图 */ background: url("../static/images/index/backImg.jpg") no-repeat; /* 背景图垂直、水平均居中 */ background-position: center center; /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */ background-attachment: fixed; /* 让背景图基于容器大小伸缩 */ background-size: cover; /* 设置背景颜色,背景图加载过程中会显示背景色 */ background-color: rgba(41, 50, 39, 1); }
發現body的高度為0,所以圖片不能顯示;解決方法是給html設定寬高各100%,這樣body就有值了,背景圖片完整的充滿整個螢幕。
(推薦教學:CSS教學)
擴充知識:
url(images/beijing.png)-圖片路徑的位置;
no-repeat—— 圖片不重複;
center 0px——center是距離頁面左邊的定位,0px是距離頁面上面的定位;
background-position: center 0——就是圖片的定位,同上;
background-size: cover;——把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中;
min-height: 100vh;——視窗的高度,「視區」所指為瀏覽器內部的可視區域大小,即window.innerWidth/ window.innerHeight大小。
相關影片教學推薦:css影片教學
#以上是css實現背景圖滿螢幕效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!