據(jù)說(shuō)看完上一節(jié)教程之后好幾撥人哭昏在了廁所。別再昏了，起來(lái)嗨~
其實(shí)后面講到響應(yīng)式我們可以根據(jù)實(shí)際情況去調(diào)節(jié)海報(bào)的高度，講到 JQuery 我們可以很方便的動(dòng)態(tài)設(shè)置海報(bào)高度。那時(shí)候有的你們哭的，讓感動(dòng)的淚水盡情地?fù)]灑吧，歐耶~
反正也都感動(dòng)了，索性再感動(dòng)一下好了，來(lái)玩?zhèn)€ CSS3 的屬性哦~對(duì)了，你們說(shuō)什么是 CSS3 啊，什么是 HTML5 啊，就是那些低版本 IE 兼容不了的東西……
所以今天的屬性你要是在小于等于 8 版本的 IE 下瀏覽可能不起作用。這個(gè)屬性是 background-size ，他可以同時(shí)含有兩個(gè)值，依次是 X 軸方向和 Y 軸方向?？梢栽O(shè)置帶長(zhǎng)度單位的數(shù)字值，或者百分比。然后不設(shè)置則默認(rèn) auto。這個(gè)跟 width 或者 height 屬性是一致的，其實(shí)這就是設(shè)置背景圖片的寬高，你看這個(gè)以前讓很多人發(fā)愁過(guò)的問(wèn)題到了 CSS3 下面變得十分簡(jiǎn)單了。
只是寬高設(shè)置還需要演示么？配合昨天講到的（background-position）可以想出各種玩法，看你的想象力了哦。然后我們?cè)賮?lái)說(shuō)一個(gè) background-size 的特殊值：cover。這個(gè)值什么意思呢？就是圖片等比例縮放至恰好覆蓋整個(gè)元素，這種情況其實(shí)說(shuō)白了就是某一邊正好100%，另一邊等于或者大于元素對(duì)應(yīng)方向的長(zhǎng)度。
反正你理解為圖片不變形（只是放大或者縮?。┑奶顫M元素就是了，再不理解就試試唄，反正不要錢。這就是學(xué)習(xí)方法，你看，這么說(shuō)就顯得高大上了。
然后我們這里就用 cover 這個(gè)值就好了。
background-size: cover;看看效果，大圖在橫向上得以完美地展示：
但是這里存在一些隱含的問(wèn)題，第一、我們當(dāng)前圖片較大，需要進(jìn)行偏移（background-position），那么我們的偏移量就很難確定，不過(guò)如果你只是定位（left、top 之類）倒是還不至于有影響；第二、我們的海報(bào)（#post）長(zhǎng)寬比不是確定的，所以，你可能無(wú)法確定究竟哪一邊是 100%，進(jìn)而的，你也可能無(wú)法十分明確的確定海報(bào)的展示區(qū)域。在當(dāng)前，這是我們很難解決的問(wèn)題，所以這次我們無(wú)法使用這個(gè)屬性。但是等到后面我們學(xué)習(xí)了響應(yīng)式和 JQ 之后，可以根據(jù)情況對(duì)網(wǎng)頁(yè)進(jìn)行動(dòng)態(tài)設(shè)置了，那這些雞肋的問(wèn)題就可以解決掉了。那才是真正有了生命的網(wǎng)頁(yè)。
好啦，演示了一個(gè) CSS3 屬性，其實(shí)也不過(guò)如此嘛，沒有什么神奇的地方，跟以前的屬性用起來(lái)一樣的普通啊，而且他也有他的小缺點(diǎn)?？墒怯行┤朔堑蒙窕@些東西，把 HTML5 和 CSS3 搞得多么多么高大上，其實(shí)完全沒必要么，反正我就是個(gè)土鱉，給我披薩我也卷著大蔥吃，但是我身體倍兒棒，你能怎么樣。
反正也是講到背景圖像嘛，索性我們就再講一個(gè)屬性好了。background-attachment ，這個(gè)屬性是說(shuō)元素的背景圖像是否相對(duì)于窗口滾動(dòng)，默認(rèn)當(dāng)然是滾動(dòng)了，就是像我們平時(shí)見到的那樣。但是當(dāng)你設(shè)置為 fixed 的時(shí)候，他就相對(duì)于窗口固定了，測(cè)試方法：給咱們現(xiàn)在的代碼的 #post 元素加上 background-attachment: fixed; ，然后在 html 代碼里的 #post 元素下面加上很多個(gè) <br /> 這樣頁(yè)面就可以滾動(dòng)了哦，那么上下滾動(dòng)頁(yè)面試試看吧，隨便你的頁(yè)面怎么動(dòng)，背景也在原地的哦。借助這個(gè)屬性我們又可以做出很多神奇的效果了呢。當(dāng)然，這里也說(shuō)明了上一章提到的 w3cschool 的說(shuō)法是怎樣的誤導(dǎo)了。
然后，我們把background-attachment: fixed; 去掉哦，那些多加的 br 自然也要去掉，回到我們的主線任務(wù)上來(lái)。我們的主線任務(wù)是什么來(lái)的？哦，對(duì)了，吃烤串，老板，再來(lái)三十串大魷魚，少放辣椒，對(duì)，就是對(duì)面這個(gè)正在看我教程的人付款。別跑，還有啤酒呢……算了，他跑了，我們繼續(xù)聊海報(bào)。
這是一個(gè)海報(bào)，假設(shè)我們現(xiàn)在我們的海報(bào)上已經(jīng)有了完整的內(nèi)容，你別看我，我這上沒有，我就放了張圖片示意一下，看不慣你咬我啊，額，男生就算了。那么我們現(xiàn)在想給他加個(gè)鏈接，這是一個(gè)很常見的需求，對(duì)吧。你說(shuō)要是圖片就簡(jiǎn)單了，可是我們卻把它設(shè)置成了背景。我跟你說(shuō)啊，這個(gè)要是圖片，你想讓他這么居中對(duì)齊，然后兩邊超出的部分隱藏，這個(gè)效果可是要好麻煩才能做出來(lái)的哦。而且你真的打算給寬屏圖片整個(gè)加鏈接嗎？那你一定沒考慮過(guò)用戶體驗(yàn)這一層。
我在一個(gè)頁(yè)面需要滾動(dòng)的時(shí)候喜歡先用鼠標(biāo)在空白的地方點(diǎn)一下，以確保焦點(diǎn)在頁(yè)面上。但是如果我點(diǎn)哪里都會(huì)產(chǎn)生某些作用的話，我會(huì)很困擾。就好像你要抓住一塊掉落的豆腐，卻又不能讓他碎掉般糾結(jié)。所以我覺得我們把兩邊只是為了視覺補(bǔ)白的部分留出來(lái)，只給中間有效內(nèi)容區(qū)加鏈接就好。
怎么加？其實(shí)完全是我們講過(guò)的東西哦，先給 #post 元素里邊放一個(gè)空鏈接，我說(shuō)的空是指鏈接內(nèi)沒有內(nèi)容，不是說(shuō)不設(shè)置鏈接的各種屬性哦。
<div id="post">
<a class="post-link"></a>
</div><!-- #post End -->然后給剛才的鏈接設(shè)置 CSS。
#post .post-link {
display: block;
width: 960px;
height: 100%;
margin: 0 auto;
}a 是內(nèi)聯(lián)元素（inline），先轉(zhuǎn)換成塊元素，然后設(shè)置寬高，最后用 margin 居中，很簡(jiǎn)單。但是我們的目的達(dá)到了，去頁(yè)面移動(dòng)鼠標(biāo)看看吧，注意鼠標(biāo)光標(biāo)的變化哦~~
然后說(shuō)一下這個(gè)寬度，960px 是在 1024px 寬度的屏幕下可以舒服的展示（不出現(xiàn)橫向滾動(dòng)條）的最大寬度。有人說(shuō)淘寶的 990px 寬度，不過(guò)不幸的是掏寶商城頁(yè)面在 1024px 寬度屏幕下會(huì)出現(xiàn)橫向滾動(dòng)。也許你說(shuō)這不重要吧，反正現(xiàn)在都是大屏幕，這就看你期望怎樣的兼容性了。不過(guò)其實(shí)有了響應(yīng)式，這些問(wèn)題也就不是大問(wèn)題了?？墒堑搅说桶姹镜?IE 上，唉，一切都是浮云，不得不再說(shuō)一句 IE 該死！
本章學(xué)習(xí)卡片：卡片 28
本章代碼下載：本章代碼
本書是收費(fèi)的，不過(guò)交費(fèi)憑自覺。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：
alay9999@163.com （劉源）
為了讓大家閱讀方便，本書將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：
未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多