摘要：那我們來看一下這個首頁的布局是如何實現(xiàn)的為了實現(xiàn)全的覆蓋，第一個要做的就是設(shè)置的為，寬度的話，應為是自動全覆蓋，就無需多做設(shè)置。

  
本文發(fā)表于前端觀察，最新改動可訪問我的博客或是相關(guān)Github Repo。
  
  
大家好，我是新人kalasoo，現(xiàn)在還處在“試用期”，作為一個自學出來的前端新手，能夠加入前端觀察實在是異常興奮。既然要一起來維護這個關(guān)于前端的博客，我一定會努力爭取我所寫的內(nèi)容可以追上這里文章的質(zhì)量水平。作為開始，我會做一個小小的系列來分析那些有名、特別、設(shè)計感十足或是交互體驗出眾的網(wǎng)站。同時我還會認真閱讀其前端代碼，為大家重現(xiàn)那些神奇的效果是如何實現(xiàn)的，當然也會盡我所知引用更多的資源來豐富內(nèi)容。希望這個系列可以讓大家更加了解前端技術(shù)，同時也可以鍛煉我自己。

決定第一個來做這個網(wǎng)站的原因很簡單，那就是好看??！由于Medium的出現(xiàn)嚴重影響改變了博客、發(fā)布平臺的風格以及編輯器等前端組建的設(shè)計，我們會分多期來分析各種細節(jié)是如何實現(xiàn)的。我們尤整體走向局部，所以我們先從整體布局來分析：

首頁布局以及大背景圖

Medium是由Twitter的聯(lián)合創(chuàng)始人：Evan Williams和Biz Stone創(chuàng)辦于2012年8月創(chuàng)辦的一個文章寫作、閱讀平臺。注意，我這里并沒有用很多網(wǎng)站上援引的博客平臺是因為Medium的出現(xiàn)塑造了一種新的社會化自我營銷渠道。在首頁引入的Welcome to Medium里，我們看到它的初衷是為了讓人們更好地寫作，但是作為Twitter的一個延伸，它依舊搭載在一個社交性很強的平臺之上。這也讓在Medium中寫作的人更愿意去分享、營銷、推廣自己的寫作內(nèi)容，甚至成為一些知名Developers, Designers and even Managers的發(fā)布渠道。例如：Facebook的Product Design Director Julie Zhuo就曾經(jīng)通過在Medium上發(fā)表文章來解釋Facebook為何revert掉在視覺層面上非常突出的新版界面。而更讓人覺得特別的是，每當我看到好的文章分享到twitter上時，都會有作者親自來favorite你的tweet，這簡直就是自我運營啊，有木有！

好啦，閑話說完，我們進入主題。

大背景圖或是視頻，已經(jīng)成為累當今服務性網(wǎng)站設(shè)計的一個趨勢，隨著網(wǎng)速越來越快、屏幕越來越大，一張巨幅首頁圖片無論從視覺沖擊力還是從性能上都已經(jīng)不再是不可能實現(xiàn)的功能。那我們來看一下這個首頁的布局是如何實現(xiàn)的：

HTML:

  

    ::before
    

      

        

          ::before
          

            
...
            
...
          
          
        
      
    
    ::after
  

CSS:

為了實現(xiàn)全window的覆蓋，第一個要做的就是設(shè)置html, body的height為100%，寬度的話，應為是自動全覆蓋，就無需多做設(shè)置。.container只是作為一個過度，同樣設(shè)置到100%的高度（這里我會暫時忽略除了layout之外的屬性設(shè)置）。
再深一層是便是.surface，除了再次繼承了滿高度、滿寬度外，還定義了box-sizing: border-box;，請移位MDN來理解。這里要注意它加了.suface:before, .surface:after的屬性，是為了自動生成clearfix的效果來阻止float溢出，但其實在這個首頁之中并沒有用到。

html, body, .container {
  height: 100%;
}
.surface {...}
.surface:before, .surface:after {
  display: table;
  content: " ";
}
.surface:after {
  clear: both;
}

在往里面的幾個.screen-content, .surface-content只是繼續(xù)控制高度，和一些默認背景顏色。直到下面這一層才定義了覆蓋整個背景大圖的屬性，而具體的背景圖片是只額姐加到了DOM的這個div里面（我想原因應該是有一些數(shù)據(jù)binding在里面，這樣好做更新）：

.image-fill, {
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.image-fill {
  background-color: rgba(0, 0, 0, 0.9);
}
.promo-fill {
  background-color: #000;
}

在這里，為了實現(xiàn)圖片可以滿背景覆蓋，最主要的一個元素就是background-size: cover;，這個屬性一共有以下幾個可能的值：

background-size:  |  | auto | cover | contain;

它們分別代表的意思是：

background-size: 50% | 120px | auto; 設(shè)置了背景圖片的寬度，高度則自動計算。默認的auto維持了背景圖原有的大小。

background-size: 50% auto; 同時強制定義了寬度和高度。

background-size: auto, auto, [...]; 定義給多個背景圖片（注意被一個定義會用逗號隔開，與auto auto并不是一個意思）。

background-size: cover; 這樣定義的背景圖片會被修改圖片大?。ㄩL寬比例不變），以確保剛剛好覆蓋整個Element。

background-size: contain; 背景圖片會被修改大?。ㄩL寬比例不變），以確保剛剛好被這個Element包裹在里面。

下面幾張圖分別展示了集中不同的情況：

當background-size設(shè)置為cover時，即使屏幕被拉窄拉寬，圖片依舊很好地覆蓋著整個屏幕（更多的比對還可以訪問MDN）：

contain時，圖片長寬比并不發(fā)生變化，卻會被包在window里面：

50% 100%時，圖片長寬比按照設(shè)置的數(shù)值被拉伸：

注意，這里的背景圖片都是按照默認的會重復鋪排在x和y軸上，所以當背景圖不能覆蓋element的時候，便會出現(xiàn)重復的樣式。此外，background-position: center;也定義了圖片按照所屬element的中心位置來調(diào)整大小。

這樣圖片全頁面覆蓋的實現(xiàn)方法就說明完了，contain & cover屬性的兼容性如下:

Chrome 3.0+

Firefox 3.6 (1.9.2)+

IE 9.0+

Opera 10.0+

Safari 4.1+

如果為了實現(xiàn)同樣的效果，卻要面對恐怖的IE7/8，腫么破，請嘗試如下：

.background-cover {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
          src="PATH_TO_BACKGROUND_IMAGE",
          sizingMethod="scale");
  -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
              src="PATH_TO_BACKGROUND_IMAGE",
              sizingMethod="scale");
}

但是要小心，這個實現(xiàn)方法會使得起內(nèi)部的鏈接點擊失效（請給我大MS 32個贊），而且這個實現(xiàn)的是background-size: 100% 100%的效果?；蛘呖梢酝ㄟ^jQuery (jquery.backgroundSize.js)來實現(xiàn)。

這里面是一些好看的大圖覆蓋的例子，但是并不是所有的頁面都是通過background-size來實現(xiàn)的：

http://www.whitmansnyc.com/

https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca?hl=en

http://quinntonharris.strikingly.com/

其實現(xiàn)方式其實是背景圖很大，大小設(shè)置為auto，而覆蓋效果則是通過設(shè)置外面一層的div大小來實現(xiàn)的。

http://www.lattrapereve.fr/

背景視頻大小是根據(jù)window大小的變化，用javascript來修改的。

下一期，我們會深入探討Medium上的側(cè)邊推進欄sidebar的實現(xiàn)，而這個推進效果其實有好多種不一樣的方法，有的可以在mobile上實現(xiàn)滑動效果，有的會有更好地兼容性。敬請大家期待。