2/23/2017 10:27:57 PM
CSS多重屬性：
若一個屬性同時被外部樣式表和內(nèi)部樣式表中的同名選擇器定義，如下：
外部樣式表：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
內(nèi)部樣式表
h3 {
text-align: right;
font-size: 20pt;
}
那么最終h3得到的樣式是：
color: red;
text-align: right;
font-size: 20pt;
即：有沖突的部分優(yōu)先選用內(nèi)部樣式表樣式，無沖突部分直接取用趾诗。
設(shè)置背景圖片示例：
- 網(wǎng)頁圖片：直接插入網(wǎng)頁圖片鏈接猾愿。
body
{
background-image: url(http://img05.tooopen.com/images/20150830/tooopen_sy_140703593676.jpg);
background-repeat: repeat-y;
}
- 本地圖片：“./”表示圖片位于正在被編輯的html文件所在的文件夾鞠苟，如果圖片位于正在被編輯的html文件所在的文件夾的上級文件夾噩死，則變?yōu)椤?./”
body
{
background-image: url(./tooopen_sy_140703593676.jpg);
background-repeat: repeat-y;
}
background-repeat背景重復(fù)
如果需要在頁面上對背景圖像進行平鋪霎迫，可以使用 background-repeat 屬性惶室。
屬性值 repeat 導(dǎo)致圖像在水平垂直方向上都平鋪温自，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)皇钞，no-repeat 則不允許圖像在任何方向上平鋪悼泌。
默認地，背景圖像將從一個元素的左上角開始夹界。請看下面的例子：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
background-position背景定位
下面的例子在 body 元素中將一個背景圖像居中放置：
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)鍵字會成對出現(xiàn)营密，其作用如其名稱所表明的。例如目锭，top right 使圖像放置在元素內(nèi)邊距區(qū)的右上角评汰。
根據(jù)規(guī)范纷捞，位置關(guān)鍵字可以按任何順序出現(xiàn)，只要保證不超過兩個關(guān)鍵字 - 一個對應(yīng)水平方向被去，另一個對應(yīng)垂直方向兰绣。
如果只出現(xiàn)一個關(guān)鍵字，則認為另一個關(guān)鍵字是 center编振。
所以缀辩，如果希望每個段落的中部上方出現(xiàn)一個圖像，只需聲明如下：
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}
這里要說明的是：
單一關(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
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
這會導(dǎo)致圖像適當(dāng)放置，其中心與其元素的中心對齊畅蹂。
換句話說健无，百分?jǐn)?shù)值同時應(yīng)用于元素和圖像。也就是說液斜，圖像中描述為 50% 50% 的點（中心點）與元素中描述為 50% 50% 的點（中心點）對齊累贤。
如果圖像位于 0% 0%，其左上角將放在元素內(nèi)邊距區(qū)的左上角少漆。如果圖像位置是 100% 100%臼膏，會使圖像的右下角放在右邊距的右下角。
注意Ｊ舅稹Ｉ酢！
**用百分比指定背景圖像填充的位置检访，可以為負值始鱼。其參考的尺寸為容器大小減去背景圖片大小 **
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}
如上例，偏移前圖片左上角默認與頁面左上角重合脆贵，圖片左上角坐標(biāo)為（0医清，0），水平偏移66%卖氨，垂直偏移33%会烙，偏移后左上角坐標(biāo)為【（頁面長度-圖片長度）66%，（頁面寬度-圖片寬度）33%】双泪，最后得到的效果是持搜，頁面中沒被平鋪滿的白色區(qū)域，左側(cè)寬度：右側(cè)寬度=2：1焙矛，上側(cè)寬度：下側(cè)寬度=1：2。
若background-position:60% 20%;残腌，則頁面中沒被平鋪滿的白色區(qū)域中村斟，左側(cè)寬度：右側(cè)寬度=3：2贫导，上側(cè)寬度：下側(cè)寬度=1：4。**
如果只提供一個百分?jǐn)?shù)值蟆盹，所提供的這個值將用作水平值孩灯，垂直值將假設(shè)為 50%。這一點與關(guān)鍵字類似逾滥。
background-position 的默認值是 0% 0%峰档，在功能上相當(dāng)于 top left。這就解釋了背景圖像為什么總是從元素內(nèi)邊距區(qū)的左上角開始平鋪寨昙，除非設(shè)置了不同的位置值讥巡。
- 使用長度值，如 100px 或 5cm.
長度值解釋的是元素內(nèi)邊距區(qū)左上角的偏移舔哪。偏移點是圖像的左上角欢顷。
比如，如果設(shè)置值為 50px 100px捉蚤，圖像的左上角將在元素內(nèi)邊距區(qū)左上角向右 50 像素抬驴、向下 100 像素的位置上：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
偏移只是從一個左上角到另一個左上角。也就是說缆巧，圖像的左上角與 background-position 聲明中的指定的點對齊布持。(點到點，直接加減)
