css 背景圖鋪滿整個螢幕無滾動條
阿新 • • 發佈：2018-11-12
kk總結了兩種方式實現背景圖鋪滿整個螢幕並且無滾動出現的方式，下面來一一介紹：
方法一：
先上個效果圖
html頁面：一個用來放背景圖的容器.bg
<body> <div class="main"> <div class="bg"></div> </div> <script>
style樣式：.bg的樣式
<style> body{ margin:0; padding:0; } div.bg{ /*方法一*/ position:fixed; top:0; left:0; /*以上三句是讓整個span放在螢幕的最左上方*/ width:100%; height:100%; /*以上兩句實現全屏大小*/ background:url('img/banner01.jpg') no-repeat center 0;/*引入背景圖，不重複出現*/ background-size:cover;/*圖片隨螢幕大小同步縮放,但是圖片畫面可能只顯示一部分*/ } </style>
方法二：
效果圖：
這個顯示簡直完美！
style樣式如下：
<style> body{ margin:0; padding:0; } div.bg{ width: 100%; height:100vh; background:url("img/banner01.jpg") no-repeat ; background-size:100% 100%; /*隨著原始比例縮放*/ } </style>注：vh:表示 顯示視窗的高度，設定了100vh後，div.bg的高度會隨著視窗的大小改變兒變化；
今天先到這裡啦，各位大神有什麼別的更好的方法，歡迎一起討論哦！