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