?? 1. 基礎(chǔ)語法

? background-image

設(shè)置背景圖片路徑（支持相對/絕對路徑或在線 URL）：

selector {    background-image: url("image.jpg"); /* 單張圖片 */    background-image: url("image1.jpg"), url("image2.jpg"); /* 多張圖片（逗號分隔） */}

多張圖片時，先指定的圖片層級更高（覆蓋后指定的圖片）。

此時圖片會和文字重疊，整個觀感很混亂：

你可以看到<h1>文字的后面不僅被圖片重疊，而且此時有兩張呈縱向分布的logo圖。別擔心，我們一步步來，首先是logo重復的問題，這涉及到圖片的平鋪方式。

?? 2. 關(guān)鍵輔助屬性

? background-repeat

控制圖片平鋪方式：

background-repeat: repeat;    /* 默認：水平和垂直平鋪 */background-repeat: no-repeat;  /* 不平鋪 */background-repeat: repeat-x;   /* 僅水平平鋪 */background-repeat: repeat-y;   /* 僅垂直平鋪 */

如上所說，如果你只想讓logo顯示一張圖片，這時使用background-repeat: no-repeat; 就可以解決。

接著如何將logo圖片移動位置呢？這就需要用到我們上篇講到的position語法。

? background-position

定位logo圖片起始位置（比如使其居中）

background-position: center top;     /* 關(guān)鍵詞：top/right/bottom/left/center */background-position: 20px 50%;        /* 混合單位：水平位置 垂直位置 */

注意：

? 單值時另一方向默認居中（如 background-position: top; → 水平居中，垂直靠頂）。

 ? 雙值順序：水平在前，垂直在后。

此時，我們已經(jīng)將logo圖片調(diào)整到適當位置，由于，<h1>文字不可直接刪除，那該如何去除呢？接下來就輪到“文字縮排”語法登場了。

?? 首行縮進：text-indent

語法：

selector {    text-indent: 值; /* 支持單位：px, em, %, rem */}

我們要達到看不見文字的效果，就可以用這個語法將<h1>文字推到很遠很遠很遠的地方。

這樣，既不影響咱們的搜索引擎優(yōu)化，同時又能讓我們的網(wǎng)站呈現(xiàn)簡潔美觀的logo圖，一箭雙雕。

好啦，經(jīng)過今天的內(nèi)容，我們已經(jīng)將網(wǎng)站的頁首處理好了。下篇我們會將繼續(xù)用CSS設(shè)計好網(wǎng)站剩余的版面，又會引入哪些實用又易上手的新語法呢？總之一句話，敬請期待吧！

閱讀原文?