首頁  >  文章  >  web前端  >  css實現背景圖滿螢幕效果

css實現背景圖滿螢幕效果

王林
王林轉載
2020-03-14 11:16:493244瀏覽

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中文網其他相關文章!

陳述:
本文轉載於:jb51.net。如有侵權,請聯絡admin@php.cn刪除