一塊八的啤酒真不經(jīng)喝，沒聊兩句就喝光了，導(dǎo)致上一章有點(diǎn)短?，F(xiàn)在還剩下四毛錢，買個(gè)棒棒糖都不夠，話說有錢不知道怎么花也是一種折磨啊。

今天開始聊這個(gè)頁面的大海報(bào)部分，但是一個(gè)關(guān)鍵的問題是：首屏。這是頁面的靈魂所在啊，好在我不用考慮這些，設(shè)計(jì)的問題交給設(shè)計(jì)師去發(fā)愁好了，所以我今天就隨便找張圖片演示一下就好。

你真的這么去想？太好了，你又被我忽悠了，其實(shí)今天是要你們看看前端如何滅掉設(shè)計(jì)師的。別反駁我，看下去你就知道設(shè)計(jì)是死的，網(wǎng)頁是活的了。

我們首先確定海報(bào)是寬屏的，就是屏幕多寬，我的海報(bào)就有多寬，這是為了讓老板感覺到：“”哎媽呀！你們做得好震撼！“好的，我們開始添加 Html 代碼，應(yīng)該按著順序加載 #nav 部分之后。

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

注意，我現(xiàn)在開始更加規(guī)范的寫代碼了，所以注釋一定要跟上，隨著代碼的增加，越來越容易讓我們看迷糊了，所以注釋這個(gè)小秘書顯得愈發(fā)性感起來了。

我們知道 Html 最多只是骨感美，想要豐滿，必須”創(chuàng)世神“（CSS）。

#post  {
    width: 100%;
    height: 450px;
}

現(xiàn)在設(shè)計(jì)師可以罵街了，你整天問的（別說沒有，群里我被我問了可是不止一次兩次的）網(wǎng)頁我該設(shè)計(jì)成什么寬度的問題，在這里可一點(diǎn)麻煩都沒有，一個(gè) width: 100%; 明確解決了。你說那還沒放圖片呢，說這個(gè)為時(shí)過早吧？其實(shí)放上圖片你哭得更慘。

我先去準(zhǔn)備一張圖片哦，要夠大的才夠爽，嘿嘿~于是我隨手找了這張，僅作演示而已。挺大的，2048×1363 像素的，我懶，就不根據(jù)需求裁剪了，你們不許像我這么懶，這樣不好，因?yàn)閳D片過大會(huì)導(dǎo)致加載過慢的。好了，先欣賞一下這張圖片：

然后開始設(shè)置背景了哦，其實(shí)很簡單的，以前我們?cè)O(shè)置純色背景用的是： background:顏色值; 現(xiàn)在改成： background:url(圖片地址); 就好了。這里說一下， background 是個(gè)復(fù)合屬性，其實(shí)分開寫的話有個(gè)七八十來個(gè)，我記不住，我就記住了一個(gè)，就用它了，我省心，它累不累的又不關(guān)我的事……其實(shí)這樣更簡單明確啦，分著寫……字多！

#post  {
    width: 100%;
    height: 450px;
    background: url(../images/bg.jpg);
}

簡單吧，來看看效果哦~

什么，你的圖片沒有顯示？右鍵——審查元素，你會(huì)在右側(cè) CSS 里看到圖片的地址，然后點(diǎn)擊或者右鍵（根據(jù)不同瀏覽器操作略有不同）打開圖片，然后查看地址欄，看看圖片地址跟他的實(shí)際地址有什么區(qū)別，然后據(jù)此修改代碼。這可是一個(gè)很好的練習(xí)機(jī)會(huì)，希望不要錯(cuò)過哦。

不過其實(shí)你要是按著前邊我們說的文件結(jié)構(gòu)去做的話，這邊也照抄基本不會(huì)有什么錯(cuò)，只是錯(cuò)過了一個(gè)練習(xí)而已。

好了好了，其實(shí)現(xiàn)在圖片位置并不合適，我們看到整張圖片就顯示了一個(gè)左上角。我們要定義一下背景圖片的位置（background-position），但是在這之前我們有必要先講一下網(wǎng)頁的坐標(biāo)系。坐標(biāo)系三要素，原點(diǎn)，坐標(biāo)軸，正方向（恩恩，其實(shí)我說錯(cuò)了，應(yīng)該是……你管呢，我現(xiàn)在就想說這三個(gè)，就這么地吧~）。原點(diǎn)，以參照物的左上角為原點(diǎn)，坐標(biāo)軸有三個(gè)：X 軸（橫向，即左右）、Y 軸（縱向，即上下），Z 軸（深度，即前后）。學(xué)過三維的同學(xué)說，咦，這個(gè)好熟悉的說。然后正方向，X 軸向右為正方向，Y 軸 向下為正方向，Z 軸 向屏幕外是正方向。

你沒聽懂？請(qǐng)打電話給你的初一幾何老師，讓他數(shù)落你一小時(shí)三十二分鐘?；旧媳窘坛逃玫降淖钌?yuàn)W的數(shù)學(xué)知識(shí)也沒超出初一初二的水平，而且也只是用到最基礎(chǔ)的一點(diǎn)概念而已，公式什么的……不好意思，我也早就還給老師了（別打，老師我是真的從來沒用到過他們?。。?/p>

其實(shí)網(wǎng)頁上涉及的坐標(biāo)問題很復(fù)雜，但是我的原則是，記不住我干脆不記，用的時(shí)候簡單測(cè)試一下就知道了。

背景位置的屬性值分為兩個(gè)，一個(gè) X 軸，一個(gè) Y 軸，他們都可以用數(shù)值去表示圖片的起點(diǎn)（左上角）坐標(biāo)。然后我們漏說了一個(gè)問題：原點(diǎn)，我們以本元素的右上角為原點(diǎn)。你說你隱約知道怎么調(diào)整背景位置了，Too 森普！ X 軸還有三個(gè)特殊值：left、center、right；Y 軸也還有三個(gè)特殊值：top、center、bottom?？梢灶櫭剂x嗎？就是以圖片的左（中、右、上、中、下）邊與元素的左（中、右、上、中、下）邊對(duì)齊。很復(fù)雜？看懂了就行，看懂了用的時(shí)候自然就會(huì)想起來了。

這就完了？還有百分比呢，喵的，w3schools 的網(wǎng)站不管是中文和英文都沒仔細(xì)去解釋這個(gè)問題，百分比和數(shù)值是有根本的區(qū)別的，他跟那幾個(gè)特殊值倒是很像，這里只簡單的說一下：

background-position: 0% 0% 相當(dāng)于 background-position: top left

background-position: 50% 50% 相當(dāng)于 background-position: center center

background-position: 100% 100% 相當(dāng)于 background-position: right bottom

其余數(shù)值自己體會(huì)。然后再說一下，w3school 說：”提示：您需要把 background-attachment 屬性設(shè)置為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作?！斑@句話在英文版 w3schools 中并未提及。然后中文的 w3school 只是對(duì)英文 w3schools 第三方翻譯，而不是官方出品。然后其實(shí)瀏覽器發(fā)展的那么快，現(xiàn)在根本不需要這個(gè)設(shè)置了。所以，奉勸一句，那些把 w3schools 奉為圭臬的同學(xué)醒醒吧，拿他當(dāng)詞典也就好了，但詞典不是標(biāo)準(zhǔn)，只是參考。而且如果可能，盡量直接看英文版。好吧，我又多事了，管這干啥……你愛信誰信誰，反正我說的又不全對(duì)。

回到正題，現(xiàn)在我們的背景應(yīng)該如何設(shè)置？橫向居中對(duì)齊，用 center ，縱向要往上一些，以便保證最美好的位置得以展現(xiàn)，這里用固定值就好，所以用像素來表示，那么圖片在 Y 軸的起點(diǎn)向上偏移，上面是負(fù)方向，所以用負(fù)值表示，于是我們寫作 background-position:center -250px;，不過我懶，于是把它加載了 background 這個(gè)復(fù)合屬性里：

#post  {
    width: 100%;
    height: 450px;
    background: url(../images/bg.jpg) center -250px;
}

來看看效果哦~

我覺得單這一個(gè)屬性就很好玩了，大家可以試著去做各種設(shè)置，看他的變化，然后想象一下在什么情況下需要這種設(shè)置。

本章學(xué)習(xí)卡片：卡片 27

本章代碼下載：本章代碼

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

alay9999@163.com （劉源）

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

• 主站首發(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)事宜請(qǐng)聯(lián)系： dms@zji.me