在做登陸頁面等的首頁的時候，經常會遇到需要放一張背景大圖的情況，並且需要圖片按比例縮放，來適應不同屏幕的大小。
html代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <link rel="stylesheet" href="../css/login.css"><!-- 我的css代碼路徑 --> 9 10 <title>。。。</title> 11 </head> 12 13 <body> 14 <div class="bgimg"> 15 </body> 16 17 </html>
css代碼如下：
1 .bgimg{ 2 position:fixed; 3 top: 0; 4 left: 0; 5 width:100%; 6 height:100%; 7 min-width: 1000px; 8 z-index:-10; 9 zoom: 1; 10 background-color: #fff; 11 background: url(../img/bg_login.jpg) no-repeat; 12 background-size: cover; 13 -webkit-background-size: cover; 14 -o-background-size: cover; 15 background-position: center 0; 16 }
分析一下css代碼中的作用：
position:fixed; top: 0; left: 0;
這三句是讓整個div固定在屏幕的最上方和最左方
width:100%; height:100%; min-width: 1000px;
上面前兩句是讓整個div跟屏幕大小一樣，從而達到全屏效果。而min-width是為了實現讓屏幕寬度在1000px以內時，div的大小保持不變，也就是圖片不縮放。
z-index:-10;
這個的目的是讓整個div在HTML頁面中各個層級的下方，正常情況下，默認創建的層級z-index的值是0，所以如果我們這里寫成-1也可以實現，不過這里寫-10是確保整個div在最下面，因為如果頁面中層級太多了，有的時候用-1不一定在最下面，但如果寫成-100這樣大數字的也沒有什么意義。用-10 以此能達到看上去像背景圖片，其實是一個最普通的div，只是層級關系變了，才讓人看上去看是背景圖片。
zoom: 1;
zoom是CSS hack中專對IE6起作用的部分。IE6瀏覽器會執行zoom:1表示對象的縮放比例。兼容IE6、IE7、IE8瀏覽器，經常會遇到一些問題，可以使用zoom:1來解決，zoom有如下作用：1.觸發IE瀏覽器的haslayout； 2.解決ie下的浮動，margin重疊等一些問題。
background-repeat: no-repeat;
圖片平鋪，不重復
background-size: cover; -webkit-background-size: cover; -o-background-size: cover;
上面三句是一個意思，就是讓圖片隨屏幕大小同步縮放，但是有部分可能會被裁切，不過不至於會露白，下面兩句是為chrome和opera瀏覽器作兼容。
background-position: center 0;
上面這句的意思就是圖片的位置，居中，靠左對齊
效果如下：
大於1000px時:(截圖太大了，我把圖片縮小了點)
小於1000px時：
原圖：(這個也太大了縮小了點)
作者：湯利利
鏈接：https://www.jianshu.com/p/5480cd1a5d89
來源：簡書