CSS實現自適應不同大小螢幕的背景大圖的兩種方法（轉自簡書）
阿新 • • 發佈：2018-11-09
CSS實現自適應不同大小螢幕的背景大圖的兩種方法
一張清晰漂亮的背景圖片能給網頁加分不少，設計師也經常會給頁面的背景使用大圖，我們既不想圖片因為不同解析度圖片變形，也不希望當在大屏的情況下，背景有一塊露白，簡而言之，就是實現能自適應螢幕大小又不會變形的背景大圖，而且背景圖片不會隨著滾動條滾動而滾動。
用CSS實現真的很簡單很簡單，下面我們來看一下第一種方法具體的程式碼：
HTML程式碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>title</title> 7 </head> 8 <body> 9 <div class="wrapper"> 10 <!--背景圖片--> 11 <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div> 12 <!--其他程式碼 ... --> 13 </div> 14 </body> 15 </html>
CSS程式碼：
1 #web_bg{ 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; 11background-repeat: no-repeat; 12 background-size: cover; 13 -webkit-background-size: cover; 14 -o-background-size: cover; 15 background-position: center 0; 16 }
你看，程式碼就是這麼簡單。
下面，我們來分析一下，css中每句程式碼的作用是什麼：
1 position:fixed; 2 top: 0; 3 left: 0;
這三句是讓整個div固定在螢幕的最上方和最左方
1 width:100%; 2 height:100%; 3 min-width: 1000px;
上面前兩句是讓整個div跟螢幕實現一模一樣的大小，從而達到全屏效果，而min-width是為了實現讓螢幕寬度在1000px以內時，div的大小保持不變，也就是說在這種情況下，縮放螢幕寬度時，圖片不要縮放（只有在1000px以內才有效）。
1 z-index:-10;
這個的目的是讓整個div在HTML頁面中各個層級的下方，正常情況下，第一個建立的層級z-index的值是0，所以如果我們這裡寫成-1也可以實現，不過這裡寫-10是確保整個div在最下面，因為如果頁面中層級太多了，有的時候用-1不一定在最下面，但如果寫成-100這樣大數字的也沒有什麼意義。用index:-10 以此能達到看上去像背景圖片，其實是一個最普通的div，只是層級關係變了，才讓人看上去看是背景圖片。
1 zoom: 1;
這個的目的是為了相容IE瀏覽器
1 background-repeat: no-repeat;
上面這個是背景不要重複
1 background-size: cover; 2 -webkit-background-size: cover; 3 -o-background-size: cover;
上面三句是一個意思，就是讓圖片隨螢幕大小同步縮放，但是有部分可能會被裁切，不過不至於會露白，下面兩句是為chrome和opera瀏覽器作相容。
1 background-position: center 0;
上面這句的意思就是圖片的位置，居中，靠左對齊
第二種方法的程式碼
HTML程式碼如下：
1 <div class="about-me"> 2  3 <a href="http://iheima.com" class="introduction"> 4 <h3>About me</h3> 5 </a> 6 </div>
css程式碼如下：
1 .about-me { 2 position: relative; 3 min-width: 1480px; 4 width: 100%; 5 height: 520px; 6 overflow: hidden; 7 img.me { 8 position: absolute; 9 bottom: 0; 10 left: 0; 11 width: 100%; 12 height: auto; 13 min-height: 520px; 14 z-index: 0; 15 } 16 .introduction { 17 display: block; 18 position: absolute; 19 left: 0; 20 bottom: 0; 21 right: 0; 22 top: 0; 23 width: 100%; 24 height: 100%; 25 color: #fff; 26 background: rgba(0, 0, 0, .6); 27 z-index: 2; 28 cursor: pointer; 29 h3 { 30 margin: 100px auto 140px; 31 width: 170px; 32 height: 90px; 33 line-height: 90px; 34 font-size: 36px; 35 border-bottom: 2px solid #0b6d99; 36 } 37 } 38 }
來自： https://www.jianshu.com/p/5480cd1a5d89