【文章內(nèi)容簡介】 dimage:url(39。/i/39。)。 backgroundrepeat:norepeat。 backgroundposition:center。 } 為 backgroundposition 屬性提供值有很多方法。首先，可以使用一些關(guān)鍵字： top、 bottom、 left、right 和 center。通常，這些關(guān)鍵字會(huì)成對(duì)出現(xiàn)，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最后也可以使用百分?jǐn)?shù)值。不同類型的值對(duì)于背景圖像的放置稍 有差異。 關(guān)鍵字 圖像放置關(guān)鍵字最容易理解，其作用如其名稱所表明的。例如， top right 使圖像放置在元素內(nèi)邊距區(qū)的右上角。 根據(jù)規(guī)范，位置關(guān)鍵字可以按任何順序出現(xiàn)，只要保證不超過兩個(gè)關(guān)鍵字 一個(gè)對(duì)應(yīng)水平方向，另一個(gè)對(duì)象垂直方向。 如果只出現(xiàn)一個(gè)關(guān)鍵字，則認(rèn)為另一個(gè)關(guān)鍵字是 center。 所以，如果希望每個(gè)段落的中部上方出現(xiàn)一個(gè)圖像，只需聲明如下： p { backgroundimage:url(39。39。)。 backgroundrepeat:norepeat。 backgroundposition:top。 } 下面是等價(jià)的位置關(guān)鍵字： 單一關(guān)鍵字 等價(jià)的關(guān)鍵字 center center center top top center 或 center top bottom bottom center 或 center bottom right right center 或 center right left left center 或 center left 百分?jǐn)?shù)值 百分?jǐn)?shù)值的表現(xiàn)方式更為復(fù)雜。假設(shè)你希望用百分?jǐn)?shù)值將圖像在其元素 中居中，這很容易： body { backgroundimage:url(39。/i/39。)。 backgroundrepeat:norepeat。 backgroundposition:50% 50%。 } 這會(huì)導(dǎo)致圖像適當(dāng)放置，其中心與其元素的中心對(duì)齊。 換句話說，百分?jǐn)?shù)值同時(shí)應(yīng)用于元素和圖像。 也就是說，圖像中描述為 50% 50% 的點(diǎn)（中心點(diǎn)）與元素中描述為 50% 50% 的點(diǎn)（中心點(diǎn)）對(duì)齊。 如果圖像位于 0% 0%，其左上角將放在元素內(nèi) 邊距區(qū)的左上角。如果圖像位置是 100% 100%，會(huì)使圖像的右下角放在右邊距的右下角。 因此，如果你想把一個(gè)圖像放在水平方向 2/垂直方向 1/3 處，可以這樣聲明： body { backgroundimage:url(39。/i/39。)。 backgroundrepeat:norepeat。 backgroundposition:66% 33%。 } 如果只提供一個(gè)百分?jǐn)?shù)值，所提供的這個(gè)值將用作水平值，垂直值將假設(shè)為 50%。這一點(diǎn)與關(guān)鍵 字類似。 backgroundposition 的默認(rèn)值是 0% 0%，在功能上相當(dāng)于 top left。這就解釋了背景圖像為什么總是從元素內(nèi)邊距區(qū)的左上角開始平鋪，除非您設(shè)置了不同的位置值。 長度值 長度值解釋的是元素內(nèi)邊距區(qū)左上角的偏移。偏移點(diǎn)是圖像的左上角。 比如，如果設(shè)置值為 50px 100px，圖像的左上角將在元素內(nèi)邊距區(qū)左上角向右 50 像素、向下 100 像素的位置上： body { backgroundimage:url(39。/i/39。)。 backgroundrepeat:norepeat。 backgroundposition:50px 100px。 } 注意，這一點(diǎn)與百分?jǐn)?shù)值不同，因?yàn)槠浦皇菑囊粋€(gè)左上角到另一個(gè)左上角。也就是說，圖像的左上角與 backgroundposition 聲明中的指定的點(diǎn)對(duì)齊。 背景關(guān)聯(lián) 如果文檔比較長，那么當(dāng)文檔向下滾動(dòng)時(shí)，背景圖像也會(huì)隨之滾動(dòng)。當(dāng)文檔滾動(dòng)到超過圖像的位置時(shí)，圖像就會(huì)消失。 您可以通過 backgroundattachment 屬性 防止這種滾動(dòng)。通過這個(gè)屬性，可以聲明圖像相對(duì)于可視區(qū)是固定的（ fixed），因此不會(huì)受到滾動(dòng)的影響： body { backgroundimage:url(/i/)。 backgroundrepeat:norepeat。 backgroundattachment:fixed } 如需查看上例的效果，可以 親自試一試 。 backgroundattachment 屬性的默認(rèn)值是 scroll，也就是說，在默認(rèn)的情況下，背景會(huì)隨文檔滾動(dòng)。 CSS 背景實(shí)例 設(shè)置背景顏色 本 例演示如何為元素設(shè)置背景顏色。 設(shè)置文本的背景顏色 本例顏色如何設(shè)置部分文本的背景顏色。 將圖像設(shè)置為背景 本例演示如何將圖像設(shè)置為背景。 將圖像設(shè)置為背景 2 本例演示如何為多個(gè)元素同時(shí)設(shè)置背景圖像。 如何重復(fù)背景圖像 本例演示如何重復(fù)背景圖像。 如何在垂直方向重復(fù)背景圖像 本例演示如何垂直地重復(fù)背景圖像。 如何在水平方向重復(fù)背景圖像 本例演示如何水平地重復(fù)背景圖像。 如何僅顯示一次背景圖像 本例演示如何僅顯示一次背景圖像。 如何放置背景圖像 本例演示如何在頁面上放置背景圖像。 如何使用 %來定位背景圖像 本例演示如何使用百分比來在頁面上定位背景圖像。 如何使用像素來定位背景圖像 本例演示如何使用像素來在頁面上定位背景圖像。 如何設(shè)置固定的背景圖像 本例演示如何設(shè)置固定的背景圖像。圖像不會(huì)隨著頁面的其他部分滾動(dòng)。 所有背景屬性在一個(gè)聲明之中 本例演示如何使用簡寫屬性來將所有背景屬性設(shè)置在一個(gè)聲明之中。 CSS 背景屬性 屬性 描述 background 簡寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中。 backgroundattachment 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。 backgroundcolor 設(shè)置元素的背景顏色。 backgroundimage 把圖像設(shè)置為背景。 backgroundposition 設(shè)置背景圖像的起始位置。 backgroundrepeat 設(shè)置背景圖像是否及如何重復(fù)。 CSS 文本 CSS 文本屬性可定義文本的外觀。 通過文本屬性，您可以改變文本的顏色、字符間距，對(duì)齊文本，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)，等等。 縮進(jìn)文本 把 Web 頁面上的段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果。 CSS 提供了 textindent 屬性 ，該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。 通過使用 textindent 屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長度，甚至該長度可以是負(fù)值。 這個(gè)屬性最常見的用途是將段落的首行縮進(jìn)，下面的規(guī)則會(huì)使所有段落的首行縮進(jìn) 5 em： p {textindent: 5em。} 注意： 一般來說，可以為所有塊級(jí)元素應(yīng)用 textindent，但無法將該屬性應(yīng)用于行內(nèi)元素，圖像之類的替換元素上也無法應(yīng)用 textindent 屬性。不過，如果一個(gè)塊級(jí)元素（比如段落）的首行中有一個(gè)圖像，它會(huì)隨該行的其余文本移動(dòng)。 提示： 如果想把一個(gè)行內(nèi)元素的第一行 “縮進(jìn) ”，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果。 使用負(fù)值 textindent 還可以設(shè)置為負(fù)值。利用這種技術(shù)，可以實(shí)現(xiàn)很多有趣的效果，比如 “懸掛縮進(jìn) ”，即第一行懸掛在元素中余下部分的左 邊： p {textindent: 5em。} 不過在為 textindent 設(shè)置負(fù)值時(shí)要當(dāng)心，如果對(duì)一個(gè)段落設(shè)置了負(fù)值，那么首行的某些文本可能會(huì)超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問題，建議針對(duì)負(fù)縮進(jìn)再設(shè)置一個(gè)外邊距或一些內(nèi)邊距： p {textindent: 5em。 paddingleft: 5em。} 使用百分比值 textindent 可以使用所有長度單位，包括百分比值。 百分?jǐn)?shù)要相對(duì)于縮進(jìn)元素父元素的寬度。換句話說，如果將縮進(jìn)值設(shè)置為 20%，所影響元素的第一行會(huì)縮進(jìn)其父 元素寬度的 20%。 在下例中，縮進(jìn)值是父元素的 20%，即 100 個(gè)像素： div {width: 500px。} p {textindent: 20%。} div pthis is a paragragh/p /div 繼承 textindent 屬性可以繼承，請(qǐng)考慮如下標(biāo)記： divouter {width: 500px。} divinner {textindent: 10%。} p {width: 200px。} div id=outer div id=innersome text. some text. some text. pthis is a paragragh./p /div /div 以上標(biāo)記中的段落也會(huì)縮進(jìn) 50 像素，這是因?yàn)檫@個(gè)段落繼承了 id 為 inner 的 div 元素的縮進(jìn)值。 水平對(duì)齊 textalign 是一個(gè)基本的屬性，它 會(huì)影響一個(gè)元素中的 文本行 互相之間的對(duì)齊方式。它的前 3 個(gè)值相當(dāng)直接，不過第 4 個(gè)和第 5 個(gè)則略有些復(fù)雜。 值 left、 right 和 center 會(huì)導(dǎo)致元素中的文本分別左對(duì)齊、右對(duì)齊和居中。 西方語言都是從左向右讀，所有 textalign 的默認(rèn)值是 left。文本在左邊界對(duì)齊，右邊界呈鋸齒狀（稱為 “從左到右 ”文本）。對(duì)于希伯來語和阿拉伯語之類的的語言， textalign 則默認(rèn)為 right，因?yàn)檫@些語言從右向左讀。不出所料， center 會(huì)使每個(gè)文本行在元素中居中。 提示： 將塊級(jí)元素或表 元素居中，要通過在這些元素上適當(dāng)?shù)卦O(shè)置左、右外邊距來實(shí)現(xiàn)。 textalign:center 與 CENTER 您可能會(huì)認(rèn)為 textalign:center 與 CENTER 元素的作用一樣，但實(shí)際上二者大不相同。 CENTER 不僅影響文本，還會(huì)把整個(gè)元素居中。 textalign 不會(huì)控制元素的對(duì)齊，而只影響內(nèi)部內(nèi)容。元素本身不會(huì)從一段移到另一端，只是其中的文本受影響。 justify 最后一個(gè)水平對(duì)齊屬性是 justify。 在兩端對(duì)齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上。 然后，調(diào)整單詞和字母間的間隔，使各行的長度恰好相等。您也許已經(jīng)注意到了，兩端對(duì)齊文本在打印領(lǐng)域很常見。 需要注意的是，要由用戶代理（而不是 CSS）來確定兩端對(duì)齊文本如何拉伸，以填滿父元素左右邊界之間的空間。如需了解詳情，請(qǐng)參閱 CSS textalign 屬性參考頁 。 字間隔 wordspacing 屬性 可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。 wordspacing 屬性接受一個(gè)正長度值或負(fù)長度值。如果提供一個(gè)正長度值，那么字之間的間隔就會(huì)增加。為 wordspacing 設(shè)置一個(gè)負(fù)值，會(huì)把它拉近： {wordspacing: 30px。} {wordspacing: 。} p class=spread This is a paragraph. The spaces between words will be increased. /p p class=tight This is a paragraph. The spaces between words will be decreased. /p 實(shí)例 TIY ：增加或減少單詞間距（字間隔） 注釋： 如需深入理解 CSS 對(duì) “字 ”（ word）的定義，請(qǐng)?jiān)L問 CSS wordspacing 屬性參考頁 。 字母間隔 letterspacing 屬性 與 wordspacing 的區(qū)別在于，字母間隔修改的是字符或字母之間的間隔。 與 wordspacing 屬性一樣， letterspacing 屬性的可取值包括所有長度。默認(rèn)關(guān)鍵字是 normal（這與 letterspacing:0 相同）。輸入的長度值會(huì)使字母之間的間隔增加或減少指定的量： h1 {letterspacing: } h4 {letterspacing: 20px} h1This is header 1/h1 h4This is header 4/h4 實(shí)例 TIY ：規(guī)定字符間距（字母間隔） 字符轉(zhuǎn)換 texttransform 屬性 處理文本的大小寫。這個(gè)屬性有 4 個(gè)值： ? none ? uppercase ? lowercase ? capitalize 默認(rèn)值 none 對(duì)文本不做任何改動(dòng)，將使用源文檔中的原有大小寫。顧名思義， uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫和全小寫字符。最后， capitalize 只對(duì)每個(gè)單詞的首字母大寫。