css實現背景圖滿螢幕效果

想讓整個介面有一個背景圖片，自然想到的是在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中文網其他相關文章！