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;
11   background-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       ![](./images/about-me.jpg)
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         }