據(jù)說看完上一節(jié)教程之后好幾撥人哭昏在了廁所。別再昏了，起來嗨~

其實后面講到響應式我們可以根據(jù)實際情況去調(diào)節(jié)海報的高度，講到 JQuery 我們可以很方便的動態(tài)設置海報高度。那時候有的你們哭的，讓感動的淚水盡情地揮灑吧，歐耶~

反正也都感動了，索性再感動一下好了，來玩?zhèn)€ CSS3 的屬性哦~對了，你們說什么是 CSS3 啊，什么是 HTML5 啊，就是那些低版本 IE 兼容不了的東西……

所以今天的屬性你要是在小于等于 8 版本的 IE 下瀏覽可能不起作用。這個屬性是 background-size ，他可以同時含有兩個值，依次是 X 軸方向和 Y 軸方向?？梢栽O置帶長度單位的數(shù)字值，或者百分比。然后不設置則默認 auto。這個跟 width 或者 height 屬性是一致的，其實這就是設置背景圖片的寬高，你看這個以前讓很多人發(fā)愁過的問題到了 CSS3 下面變得十分簡單了。

只是寬高設置還需要演示么？配合昨天講到的（background-position）可以想出各種玩法，看你的想象力了哦。然后我們再來說一個 background-size 的特殊值：cover。這個值什么意思呢？就是圖片等比例縮放至恰好覆蓋整個元素，這種情況其實說白了就是某一邊正好100%，另一邊等于或者大于元素對應方向的長度。

反正你理解為圖片不變形（只是放大或者縮小）的填滿元素就是了，再不理解就試試唄，反正不要錢。這就是學習方法，你看，這么說就顯得高大上了。

然后我們這里就用 cover 這個值就好了。

background-size: cover;

看看效果，大圖在橫向上得以完美地展示：

但是這里存在一些隱含的問題，第一、我們當前圖片較大，需要進行偏移（background-position），那么我們的偏移量就很難確定，不過如果你只是定位（left、top 之類）倒是還不至于有影響；第二、我們的海報（#post）長寬比不是確定的，所以，你可能無法確定究竟哪一邊是 100%，進而的，你也可能無法十分明確的確定海報的展示區(qū)域。在當前，這是我們很難解決的問題，所以這次我們無法使用這個屬性。但是等到后面我們學習了響應式和 JQ 之后，可以根據(jù)情況對網(wǎng)頁進行動態(tài)設置了，那這些雞肋的問題就可以解決掉了。那才是真正有了生命的網(wǎng)頁。

好啦，演示了一個 CSS3 屬性，其實也不過如此嘛，沒有什么神奇的地方，跟以前的屬性用起來一樣的普通啊，而且他也有他的小缺點?？墒怯行┤朔堑蒙窕@些東西，把 HTML5 和 CSS3 搞得多么多么高大上，其實完全沒必要么，反正我就是個土鱉，給我披薩我也卷著大蔥吃，但是我身體倍兒棒，你能怎么樣。

反正也是講到背景圖像嘛，索性我們就再講一個屬性好了。background-attachment ，這個屬性是說元素的背景圖像是否相對于窗口滾動，默認當然是滾動了，就是像我們平時見到的那樣。但是當你設置為 fixed 的時候，他就相對于窗口固定了，測試方法：給咱們現(xiàn)在的代碼的 #post 元素加上 background-attachment: fixed; ，然后在 html 代碼里的 #post 元素下面加上很多個 <br /> 這樣頁面就可以滾動了哦，那么上下滾動頁面試試看吧，隨便你的頁面怎么動，背景也在原地的哦。借助這個屬性我們又可以做出很多神奇的效果了呢。當然，這里也說明了上一章提到的 w3cschool 的說法是怎樣的誤導了。

然后，我們把background-attachment: fixed; 去掉哦，那些多加的 br 自然也要去掉，回到我們的主線任務上來。我們的主線任務是什么來的？哦，對了，吃烤串，老板，再來三十串大魷魚，少放辣椒，對，就是對面這個正在看我教程的人付款。別跑，還有啤酒呢……算了，他跑了，我們繼續(xù)聊海報。

這是一個海報，假設我們現(xiàn)在我們的海報上已經(jīng)有了完整的內(nèi)容，你別看我，我這上沒有，我就放了張圖片示意一下，看不慣你咬我啊，額，男生就算了。那么我們現(xiàn)在想給他加個鏈接，這是一個很常見的需求，對吧。你說要是圖片就簡單了，可是我們卻把它設置成了背景。我跟你說啊，這個要是圖片，你想讓他這么居中對齊，然后兩邊超出的部分隱藏，這個效果可是要好麻煩才能做出來的哦。而且你真的打算給寬屏圖片整個加鏈接嗎？那你一定沒考慮過用戶體驗這一層。

我在一個頁面需要滾動的時候喜歡先用鼠標在空白的地方點一下，以確保焦點在頁面上。但是如果我點哪里都會產(chǎn)生某些作用的話，我會很困擾。就好像你要抓住一塊掉落的豆腐，卻又不能讓他碎掉般糾結(jié)。所以我覺得我們把兩邊只是為了視覺補白的部分留出來，只給中間有效內(nèi)容區(qū)加鏈接就好。

怎么加？其實完全是我們講過的東西哦，先給 #post 元素里邊放一個空鏈接，我說的空是指鏈接內(nèi)沒有內(nèi)容，不是說不設置鏈接的各種屬性哦。

<div id="post">
    <a  class="post-link"></a>
</div><!-- #post End -->

然后給剛才的鏈接設置 CSS。

#post .post-link {
    display: block;
    width: 960px;
    height: 100%;
    margin: 0 auto;
}

a 是內(nèi)聯(lián)元素（inline），先轉(zhuǎn)換成塊元素，然后設置寬高，最后用 margin 居中，很簡單。但是我們的目的達到了，去頁面移動鼠標看看吧，注意鼠標光標的變化哦~~

然后說一下這個寬度，960px 是在 1024px 寬度的屏幕下可以舒服的展示（不出現(xiàn)橫向滾動條）的最大寬度。有人說淘寶的 990px 寬度，不過不幸的是掏寶商城頁面在 1024px 寬度屏幕下會出現(xiàn)橫向滾動。也許你說這不重要吧，反正現(xiàn)在都是大屏幕，這就看你期望怎樣的兼容性了。不過其實有了響應式，這些問題也就不是大問題了?？墒堑搅说桶姹镜?IE 上，唉，一切都是浮云，不得不再說一句 IE 該死！

本章學習卡片：卡片 28

本章代碼下載：本章代碼

本書是收費的，不過交費憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點發(fā)布，但最終內(nèi)容以主站為準：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡書： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系： dms@zji.me