css background-position 用法詳細(xì)圖文介紹
我要評(píng)論語(yǔ)法：
background-position : length || length
background-position : position || position
取值：
length :? 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。請(qǐng)參閱 長(zhǎng)度單位
position :? top | center | bottom | left | center | right
說(shuō)明：
設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定 background-image 屬性。
該屬性定位不受對(duì)象的補(bǔ)丁屬性( padding )設(shè)置影響。
默認(rèn)值為： 0% 0% 。此時(shí)背景圖片將被定位于對(duì)象不包括補(bǔ)丁( padding )的內(nèi)容區(qū)域的左上角。
如果只指定了一個(gè)值，該值將用于橫坐標(biāo)?？v坐標(biāo)將默認(rèn)為 50% 。如果指定了兩個(gè)值，第二個(gè)值將用于縱坐標(biāo)。
如果設(shè)置值為 right center ，因?yàn)?right 作為橫坐標(biāo)值將會(huì)覆蓋 center 值，所以背景圖片將被居右定位。
對(duì)應(yīng)的腳本特性為 backgroundPosition。
注：本文中使用的圖片大小為 300px*120px，為了能很清晰的表達(dá)圖形的哪部分被隱藏了，按照?qǐng)D片的大小平均分成了9等份。同時(shí)背景圖片容器區(qū)域繪制出綠色邊框清晰顯示容器的范圍。
1、background-position:0 0;
背景圖片的左上角將與容器元素的左上角對(duì)齊。該設(shè)置與background-position:left top;或者background-position:0% 0%;設(shè)置的效果是一致的。例如：
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 0 0;
border:5px solid green;
}
效果如下圖1：
圖 1
2、該屬性定位不受對(duì)象的補(bǔ)丁屬性( padding )設(shè)置影響。
例如，我們給容器元素增加padding值，背景圖片的左上角還是與容器元素的左上角對(duì)齊。在此處只是影響到了容器元素的高度和寬度。
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 0 0;
border:5px solid green;
padding:50px;
}
效果如圖2：
圖 2
3、background-position:-70px -40px;
圖片以容器左上角為參考向左偏移70px，向上偏移 40px，示例：
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll -70px -40px;
border:5px solid green;
}
效果如圖3：
圖 3
4、background-position:70px 40px;
圖片以容器左上角為參考向右偏移70px，向下偏移 40px，示例：
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 70px 40px;
border:5px solid green;
}
效果如圖4：
圖 4
5、background-position:50% 50%;
圖片水平和垂直居中。與 background-position:center center;效果等同。
等同于x：{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。
等同于y：{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。
例如：
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 50% 50%;
border:5px solid green;
}
其x=(300-210)*50%=45px;
y=(150-120)*50%=15px;
效果如圖5：
圖 5
由于超出部分別往兩端延伸，所以我們可以先制作一張寬度足夠?qū)拡D片設(shè)置水平值為50%，這樣可以用來(lái)適應(yīng)不同的瀏覽器，使得圖片水平充滿瀏覽器窗口并且居中。替代margin:50 auto的功能。
6、background-position:-50% -50%;
等同于x：-{容器(container)的寬度—背景圖片的寬度}*x百分比，超出的部分隱藏。
等同于y：-{容器(container)的高度—背景圖片的高度}*y百分比，超出的部分隱藏。
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll -50% -50%;
border:5px solid green;
}
效果如圖6：
圖 6
7、background-position:100% 100%;
圖片處于容器元素的右下角，與 background-position:right bottom;效果等同。
示例：
.container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 100% 100%;
border:5px solid green;
}
效果如圖7：
圖 7
相關(guān)文章
- 這篇文章主要針對(duì)CSS定位position的常用技法進(jìn)行探究，CSS中的position等屬性確實(shí)有很多需要認(rèn)真考究的地方，本文就和大家一起探索一下2016-04-26
- 本文針對(duì)CSS浮動(dòng)float、定位position進(jìn)行學(xué)習(xí)理解，通過(guò)實(shí)例幫助大家掌握CSS浮動(dòng)float、定位position技巧，感興趣的小伙伴們可以參考一下2016-04-21
- 這篇文章主要介紹了CSS的position屬性的完全解析,包括position和overflow在一些相似使用方面的對(duì)比,需要的朋友可以參考下2015-11-06
- 這篇文章主要介紹了舉例詳解CSS中position屬性的使用,是CSS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-09-06
- positon有4個(gè)屬性:static relative absolute fixed，我們都知道absolute是絕對(duì)定位，relative是相對(duì)定位，但是這個(gè)絕對(duì)與相對(duì)是什么意思呢？絕對(duì)是什么地方的絕對(duì)，相對(duì)又2014-11-28
對(duì)CSS中的Position、Float屬性的一些深入探討
對(duì)于Position、Float我們?cè)谄綍r(shí)使用上可以說(shuō)是使用頻率非常高的兩個(gè)CSS屬性，對(duì)于這兩個(gè)屬性的使用上面可能大多數(shù)人存在一些模糊與不清晰的地方。本文主要對(duì)這兩個(gè)屬性使用2014-06-14- position屬性主要有四種屬性值，任何元素的默認(rèn)position的屬性值均是static,靜態(tài)。這節(jié)課主要講講relative以及absolute，感興趣的朋友可以了解下2013-12-09
css中關(guān)于定位屬性position為fixed的使用記載
當(dāng)一個(gè)div想要定位時(shí)，我們第一反應(yīng)是position屬性，而position屬性除了默認(rèn)值外，還有absolute,relative和fixed，下面有個(gè)不錯(cuò)的示例，不懂的朋友可以參考下2013-11-11CSS中的position:relative;的作用示例介紹
CSS中的position:relative是控制元素相對(duì)定位的，relative 不脫離文檔流而absolute 脫離文檔流，relative 的元素盡管表面上看到它偏離了原來(lái)的位置，但它實(shí)際上在文檔流中2013-11-05- POSITION屬性用來(lái)決定元素在頁(yè)面上的位置，其定位屬性有多個(gè)，下面一一為大家介紹下，希望大家在使用過(guò)程中可以用到2013-09-09