資訊專欄INFORMATION COLUMN
摘要：概覽背景屬性用于定義元素的背景。如果邊框有透明部分如虛線邊框，會透過這些透明部分顯示出背景色。從父元素繼承背景顏色，這個在上存在兼容問題。背景圖像會隨著頁面其余部分的滾動而移動。簡寫屬性屬性在一個聲明中設(shè)置所有背景屬性。
概覽
CSS 背景屬性用于定義HTML元素的背景。
相關(guān)的屬性background-color: 設(shè)置背景顏色
background-image: 設(shè)置背景圖片
background-repeat: 設(shè)置背景圖片是否重復(fù)及如何重復(fù)
background-position: 設(shè)置背景圖像的位置
background-attachment: 背景圖像是否固定或者隨著頁面的其余部分滾動
background: 簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中
元素背景的范圍背景會填充元素的內(nèi)容、內(nèi)邊距和邊框區(qū)域，擴展到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。
瀏覽器支持所有主要瀏覽器都支持背景屬性。
注意： IE7和更早的版本不支持"繼承"的值（inherit）。 IE8需要定義!DOCTYPE。 IE9支持"繼承"。
背景顏色background-color 屬性用來定義元素的背景顏色。
body {background-color: #b0c4de;}
CSS中，顏色值通常以以下方式定義:
十六進制 - 如：#ff0000
RGB - 如：rgb(255,0,0)
顏色名稱 - 如：red
默認 - transparent,透明之意。如果一個元素沒有指定背景色，那么背景就是透明的。
inherit 從父元素繼承背景顏色，這個在IE上存在兼容問題。
背景圖像background-image 屬性用來定義元素的背景圖像。
默認地，背景圖像位于元素的左上角，并在水平和垂直方向上重復(fù)。
body {background-image: url("paper.gif");}
提示：背景顏色和背景圖像是可以共存的，請設(shè)置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果。
body {background-image: url("paper.gif");background-color:#fff;}
屬性值：
none - 默認無背景圖像
url("image path") - 圖像的可訪問路徑，可以使用網(wǎng)絡(luò)地址，相對路徑地址，絕對路徑地址
inherit - 從父元素繼承
背景重復(fù)如果需要對背景圖像平鋪，可以使用background-repeat屬性。
body {
background-image: url("gradient2.png");
background-repeat: repeat-x;
}
屬性值：
repeat 導(dǎo)致圖像在水平垂直方向上都平鋪，默認。
repeat-x 和 repeat-y 分別使背景圖像只在水平或垂直方向上重復(fù)。
no-repeat 則不允許圖像在任何方向上平鋪。
inherit 從父元素繼承。
背景定位background-position 屬性用來控制背景圖片的位置，一般配合 background-repeat: no-repeat; 使用。
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
為 background-position 屬性提供值有很多方法。首先，可以使用一些關(guān)鍵字：top、bottom、left、right 和 center。通常，這些關(guān)鍵字會成對出現(xiàn)，不過也不總是這樣。還可以使用長度值，如 100px，最后也可以使用百分數(shù)值。
關(guān)鍵詞圖像放置關(guān)鍵字最容易理解，其作用如其名稱所表明的。例如，top right 使圖像放置在元素內(nèi)邊距區(qū)的右上角。
根據(jù)規(guī)范，位置關(guān)鍵字可以按任何順序出現(xiàn)，只要保證不超過兩個關(guān)鍵字，一個對應(yīng)水平方向，另一個對應(yīng)垂直方向，top right 和 right top 是等效的。
如果只出現(xiàn)一個關(guān)鍵字，則認為另一個關(guān)鍵字是 center。
百分比百分數(shù)值的表現(xiàn)方式更為復(fù)雜。假設(shè)你希望用百分數(shù)值將圖像在其元素中居中：
body {
background-image: url("/eg_bg_03.gif");
background-repeat: no-repeat;
background-position: 50% 50%;
}
如果圖像位于 0% 0%，其左上角將放在元素內(nèi)邊距區(qū)的左上角。如果圖像位置是 100% 100%，會使圖像的右下角放在右邊距的右下角。
把一個圖像放在水平方向 2/3、垂直方向 1/3 處：
body {
background-image: url("/eg_bg_03.gif");
background-repeat: no-repeat;
background-position: 66% 33%;
}
如果只提供一個百分數(shù)值，所提供的這個值將用作水平值，垂直值將假設(shè)為 50%。
長度值長度值解釋的是元素內(nèi)邊距區(qū)左上角的偏移。偏移點是圖像的左上角。
比如，如果設(shè)置值為 50px 100px，圖像的左上角將在元素內(nèi)邊距區(qū)左上角向右 50 像素、向下 100 像素的位置上。
背景固定background-attachment 屬性設(shè)置背景圖像是否固定或隨頁面的其余部分滾動。
body {
background-image:url("image.png");
background-repeat:no-repeat;
background-attachment:fixed;
}
屬性值：
scroll 默認。背景圖像會隨著頁面其余部分的滾動而移動。
fixed 當(dāng)頁面的其余部分滾動時，背景圖像不會移動。
inherit 從父元素繼承。
簡寫屬性background 屬性在一個聲明中設(shè)置所有背景屬性。
body {
background: #00FF00 url("bgimage.gif") no-repeat fixed top;
}
如果不設(shè)置其中的某個值，也不會出問題，比如 background:#ff0000 url("smiley.gif"); 也是允許的。
通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支持，而且需要鍵入的字母也更少。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111158.html
摘要：盒子模型和標(biāo)準(zhǔn)盒子模型行內(nèi)塊元素，元素呈現(xiàn)為具有相依特性元素不會被顯示。文字基線屬性設(shè)置元素中文本行高語法長度值百分比瀏覽器有默認的行高，不同瀏覽器默認行高不一樣。 盒子模型 盒子模型的概念 高和寬的設(shè)置 邊框的設(shè)置 內(nèi)邊距的設(shè)置 外邊距的設(shè)置 盒子的計算 元素顯示的方式 盒子模型： border邊框，margin外邊距，padding內(nèi)部距，content內(nèi)容，width寬度。 ...
摘要：盒子模型邊框，外邊距，內(nèi)部距，內(nèi)容，寬度。盒子模型和標(biāo)準(zhǔn)盒子模型行內(nèi)塊元素，元素呈現(xiàn)為具有相依特性元素不會被顯示。文字基線屬性設(shè)置元素中文本行高語法長度值百分比瀏覽器有默認的行高，不同瀏覽器默認行高不一樣。 盒子模型： border邊框，margin外邊距，padding內(nèi)部距，content內(nèi)容，width寬度。 高度： height: 長度值|百分比|auto 最大高度: m...
閱讀 3777·2023-04-25 20:00
閱讀 3123·2021-09-22 15:09
閱讀 519·2021-08-25 09:40
閱讀 3429·2021-07-26 23:38
閱讀 2214·2019-08-30 15:53
閱讀 1103·2019-08-30 13:46
閱讀 2801·2019-08-29 16:44
閱讀 2056·2019-08-29 15:32
