?
このドキュメントでは、 php中國語ネットマニュアル リリース
background-position:<position>[ , <position> ]*
<position> = [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
默認(rèn)值:0% 0%,效果等同于left top
適用于:所有元素
繼承性:無
動(dòng)畫性:是
計(jì)算值:指定值
<percentage>:
用百分比指定背景圖像填充的位置??梢詾樨?fù)值。其參考的尺寸為容器大小減去背景圖片大小
<length>:
用長(zhǎng)度值指定背景圖像填充的位置??梢詾樨?fù)值。
center:
背景圖像橫向和縱向居中。
left:
背景圖像在橫向上填充從左邊開始。
right:
背景圖像在橫向上填充從右邊開始。
top:
背景圖像在縱向上填充從頂部開始。
bottom:
背景圖像在縱向上填充從底部開始。
該屬性提供2個(gè)參數(shù)值(CSS3中已允許提供3,4個(gè)值)。
如果提供三或四個(gè),每個(gè)<percentage>或<length>偏移前都必須跟著一個(gè)邊界關(guān)鍵字(即left | right | top | bottom,不包括center),偏移量相對(duì)關(guān)鍵字位置進(jìn)行偏移。
示例:假設(shè)要定義背景圖像在容器中右下方,并且距離右邊和底部各有20px
縮寫方式:
background:url(test1.jpg) no-repeat right 20px bottom 20px;
你也可以設(shè)置3個(gè)參數(shù)值:
拆分方式:
background:url(test1.jpg) no-repeat left bottom 10px;
要注意的是:設(shè)置3個(gè)或4個(gè)值,偏移量前必須有關(guān)鍵字。也就是說,形如:"10px bottom 20px" ,這樣的參數(shù)設(shè)置是錯(cuò)誤的,因?yàn)?0px前面沒有關(guān)鍵字。
如果提供兩個(gè),第一個(gè)用于橫坐標(biāo),第二個(gè)用于縱坐標(biāo)。
如果只提供一個(gè),該值將用于橫坐標(biāo);縱坐標(biāo)將默認(rèn)為50%(即center)。
對(duì)應(yīng)的腳本特性為backgroundPosition。
淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持
灰色 = 未知
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome | Android UC |
---|---|---|---|---|---|---|---|---|---|
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+ | 7.0+ |
3-4個(gè)參數(shù) 以邊界作參考偏移 | 6.0-8.0 | 2.0-12.0 | 4.0-24.0 | 3.1-6.1 | 3.2-6.1 | 2.1-4.3 | 18.0-24.0 | 7.0-9.9 | |
9.0+ | 13.0+ | 25.0+ | 7.0+ | 7.0+ | 4.4+ | 25.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>background-repeat_CSS參考手冊(cè)_web前端開發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { border: 1px solid #000; width: 400px; height: 500px; background-image: url(skin/p_103x196_1.jpg); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div class="test">背景圖水平垂直居中</div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例