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