CSS 背景
表格中的屬性我們將會(huì)透過(guò)下面兩個(gè)例子來(lái)告訴大家大家。範(fàn)例1：背景顏色
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>PHP中文網(wǎng)</p> </body> </html>
style.css
#/\*背景顏色設(shè)定為紅色\*/
body{
background-color: red;
}
p{
width: 150px;
padding: 10px;
background-color: #0014ff;
}範(fàn)例2 ：設(shè)定背景圖
我們需要在工程資料夾下放置一張圖片，我們的舉例當(dāng)中放置一個(gè)名為python.png 的圖片，該圖片用於css 設(shè)定背景圖時(shí)的引用。圖片如下：
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>PHP中文網(wǎng)</p> </body> </html>
style.css
/\*把python.png 設(shè)定為背景圖片\*/
body{
background-image: url("python.png")
}運(yùn)行結(jié)果：
大家可以看到顯示出來(lái)的背景圖有很多個(gè)python 圖片，這是因?yàn)轭A(yù)設(shè)背景圖顯示重複，我們可以background-repeat屬性來(lái)設(shè)定圖片是否可重複。 css.css 加入以下內(nèi)容
body{
background-image: url("python.png");
background-repeat: no-repeat;
}no-repeat 表示不能重複，repeat 可重複，repeat-x 表示x 軸重複，repeat-y 表示y 軸重複
運(yùn)行結(jié)果：?
background-position用來(lái)設(shè)定圖片的起始位置下面的範(fàn)例在body 元素中將一個(gè)背景圖從中間頂部放置：
body{
background-image: url("python.png");
background-repeat: no-repeat;
background-position:center top;
/\*大家可以嘗試去掉 top 來(lái)對(duì)比顯示效果\*/
}?
#為background-position 屬性提供值有很多方法。首先，可以使用一些關(guān)鍵字：top、bottom、left、right 和 center。通常，這些關(guān)鍵字會(huì)成對(duì)出現(xiàn)，但也不總是這樣。也可以使用長(zhǎng)度值，如 100px 或 5cm，最後也可以使用百分?jǐn)?shù)值。不同類型的值對(duì)於背景影像的放置稍有差異。我們這裡不詳細(xì)闡述屬性值，需要用到的時(shí)候大家可以在 w3school 上面找。
背景關(guān)聯(lián)?如果網(wǎng)頁(yè)比較長(zhǎng)，那麼當(dāng)網(wǎng)頁(yè)向下捲動(dòng)時(shí)，背景圖片也會(huì)隨之捲動(dòng)。當(dāng)網(wǎng)頁(yè)捲動(dòng)到超過(guò)圖像的位置時(shí)，圖像就會(huì)消失。 我們可以透過(guò)background-attachment屬性來(lái)防止這種滾動(dòng)。透過(guò)這個(gè)屬性，可以聲明圖像相對(duì)於視覺(jué)區(qū)是固定的（fixed），因此不會(huì)受到滾動(dòng)的影響：
body{
background-image: url("python.png");
background-repeat: no-repeat;
background-attachment:fixed;
}防止背景圖滾動(dòng)相信大家大家也是經(jīng)常見(jiàn)到，尤其是一些煩人的廣告。
背景定位
可以利用?background-position 屬性改變影像在背景中的位置。
下面的範(fàn)例在 body 元素中將一個(gè)背景圖像置中：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}為 background-position 屬性提供值有很多方法。首先，可以使用一些關(guān)鍵字：top、bottom、left、right 和 center。通常，這些關(guān)鍵字會(huì)成對(duì)出現(xiàn)，但也不總是這樣。也可以使用長(zhǎng)度值，如 100px 或 5cm，最後也可以使用百分?jǐn)?shù)值。不同類型的值對(duì)於背景影像的放置稍有差異。
關(guān)鍵字
圖像放置關(guān)鍵字最容易理解，其作用如其名稱所顯示的。例如，top right 使影像放置在元素內(nèi)邊距區(qū)的右上角。
根據(jù)規(guī)範(fàn)，位置關(guān)鍵字可以以任何順序出現(xiàn)，只要保證不超過(guò)兩個(gè)關(guān)鍵字 - 一個(gè)對(duì)應(yīng)水平方向，另一個(gè)對(duì)應(yīng)垂直方向。
如果只出現(xiàn)一個(gè)關(guān)鍵字，則認(rèn)為另一個(gè)關(guān)鍵字是 center。
所以，如果希望每個(gè)段落的中間上方出現(xiàn)一個(gè)圖像，只需聲明如下：
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}下面是等價(jià)的位置關(guān)鍵字：
百分?jǐn)?shù)值
#百分?jǐn)?shù)值的表現(xiàn)方式較為複雜。假設(shè)你希望用百分?jǐn)?shù)值將圖像在其元素中居中，這很容易：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}這會(huì)導(dǎo)致圖像適當(dāng)放置，其中心與其元素的中心對(duì)齊。換句話說(shuō)，百分?jǐn)?shù)值同時(shí)應(yīng)用於元素和影像。也就是說(shuō)，圖像中描述為 50% 50% 的點(diǎn)（中心點(diǎn)）與元素中描述為 50% 50% 的點(diǎn)（中心點(diǎn)）對(duì)齊。
如果影像位於 0% 0%，其左上角將放在元素內(nèi)邊距區(qū)的左上角。如果影像位置是 100% 100%，會(huì)使影像的右下角放在右邊距的右下角。
因此，如果你想把一個(gè)圖像放在水平方向2/3、垂直方向1/3 處，可以這樣聲明：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}如果只提供一個(gè)百分?jǐn)?shù)值，所提供的這個(gè)值將用作水平值，垂直值將假設(shè)為50%。這一點(diǎn)與關(guān)鍵字類似。
background-position 的預(yù)設(shè)值是 0% 0%，在功能上相當(dāng)於 top left。這就解釋了為什麼背景圖像總是從元素內(nèi)邊距區(qū)的左上角開(kāi)始平鋪，除非您設(shè)定了不同的位置值
<html>
<head>
<style type="text/css">
body
{
background: #ff0000 url("http://img3.imgtn.bdimg.com/it/u=4051126327,266356416&fm=11&gp=0.jpg") no-repeat fixed center;
}
</style>
</head>
<body>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
</body>
</html>
