CSS中背景background-position負值定位深入理解[圖文]
發(fā)布時間：2011-03-21 23:34:44 作者：佚名 
我要評論
我要評論CSS中背景定位background-position負值一直是不好理解的難點，一方面用的比較少，另一方面的理解的不夠深入，今天花了點時間認真的思考了，把我的心得寫出來
下面是我要用到的一個背景圖：
代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<style type="text/css" >
<!--
.style1,.style2,.style3{
float:left;
width:162px;
height:162px;
background:#CCCCCC url(/jiaocheng/UploadFiles/200804/2008041122582457.gif) 0 0 no-repeat;
border:1px dotted #999999;
color:red;
margin-right:10px;
}
.style2{
background-position:-50px -50px;
}
.style3{
background-position:100px 100px;
}
.blue{
color:blue;
}
-->
</style>
</head>
<body>
<div class="style1">
x:0,<span class="blue">y:0</span>
</div>
<div class="style2">
x:-50px,<span class="blue">y:-50px</span>
</div>
<div class="style3">
x:100px,<span class="blue">y:100px</span>
</div>
</body>
</body>
</html>
HTML頁中是162*162的灰色背景DIV塊并加入三種不同位置的背景圖片，
在瀏覽器中看到的效果：
從上圖可以看到：當為background-position:0 0;時圖片的左上角與DIV的左上角是重合的，當我們定位于background-position:-50px -50px;時發(fā)現(xiàn)圖片向左、上移動了，也就以DIV的左上角為中心，圖向左移動了50PX，向上也移動了50PX．第三個示例采用的都是正值，可以解解釋為圖向右、向下移動的效果．這個應該是好理解的．
總結一下就是以上都是以DIV的0，0點為參考點圖片移動，如果把DIV區(qū)解釋為一個坐標軸圖，向左，上都為負，向右，下為正值．
好象說這么多你也記不住，那我就告訴你，你應該記住什么吧！
在實踐中多數(shù)情況是知道一個圖的位置要如上圖中那個黃色的點，我們應該在效果圖上量出它的長度得出兩個值都是150PX,那我們定義圖的位置就要寫background-position:-150px -150px;這樣就定義好了,在圖上的量法就看下圖（這張圖相當于你用的效果圖或稱設計圖），記住這張圖相信你一定能掌握背景圖負值的方法了。
代碼如下：
復制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<style type="text/css" >
<!--
.style1,.style2,.style3{
float:left;
width:162px;
height:162px;
background:#CCCCCC url(/jiaocheng/UploadFiles/200804/2008041122582457.gif) 0 0 no-repeat;
border:1px dotted #999999;
color:red;
margin-right:10px;
}
.style2{
background-position:-50px -50px;
}
.style3{
background-position:100px 100px;
}
.blue{
color:blue;
}
-->
</style>
</head>
<body>
<div class="style1">
x:0,<span class="blue">y:0</span>
</div>
<div class="style2">
x:-50px,<span class="blue">y:-50px</span>
</div>
<div class="style3">
x:100px,<span class="blue">y:100px</span>
</div>
</body>
</body>
</html>
HTML頁中是162*162的灰色背景DIV塊并加入三種不同位置的背景圖片，
在瀏覽器中看到的效果：
從上圖可以看到：當為background-position:0 0;時圖片的左上角與DIV的左上角是重合的，當我們定位于background-position:-50px -50px;時發(fā)現(xiàn)圖片向左、上移動了，也就以DIV的左上角為中心，圖向左移動了50PX，向上也移動了50PX．第三個示例采用的都是正值，可以解解釋為圖向右、向下移動的效果．這個應該是好理解的．
總結一下就是以上都是以DIV的0，0點為參考點圖片移動，如果把DIV區(qū)解釋為一個坐標軸圖，向左，上都為負，向右，下為正值．
好象說這么多你也記不住，那我就告訴你，你應該記住什么吧！
在實踐中多數(shù)情況是知道一個圖的位置要如上圖中那個黃色的點，我們應該在效果圖上量出它的長度得出兩個值都是150PX,那我們定義圖的位置就要寫background-position:-150px -150px;這樣就定義好了,在圖上的量法就看下圖（這張圖相當于你用的效果圖或稱設計圖），記住這張圖相信你一定能掌握背景圖負值的方法了。
相關文章
css中position:relative和overflow:hidden之間的問題
在父標簽中使用了overflow:hidden;時，如果子標簽中有元素的position設置成relative的時候，在IE6和IE7中父元素的overflow對其將不起作用，其實將父標簽的position也設置成2013-09-04- CSS中主要難以理解的屬性包括盒型結構，以及定位。正如positioniseverything，本文將主要講述關于position的理解，新手朋友們可以學習下2013-09-03
- 下面與大家分享下使用position:fixed屬性讓DIV居中的關鍵代碼是position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto，感興趣的朋友可以參2013-05-15
css中position屬性(absolute|relative|static|fixed)概述及應用
position屬性的相關定義：static：無特殊定位，對象遵循正常文檔流;relative：對象遵循正常文檔流;absolute：對象脫離正常文檔流fixed：對象脫離正常文檔流，有興趣的朋友2013-04-08- 目前幾乎所有主流的瀏覽器都支持position屬性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE瀏覽器，IE9、IE10還沒測試過），以下是w3school對position五個值的2013-01-02
CSS position屬性absolute relative等五個值的解釋
目前幾乎所有主流的瀏覽器都支持position屬性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE瀏覽器，IE9、IE10還沒測試過），以下是w3school對position五個值的2012-12-15CSS樣式position屬性的一個小實例:z方向三層布局分析
使用CSS樣式中的position屬性實現(xiàn)z方向三層布局效果，本文甚是疑惑，于是乎搜集整理一番，曬出代碼和大家分享一下2012-12-07- css position 基礎教程，非常經典，推薦大家收藏。2010-03-06
- 定位(position)布局頁面說容易非常容易，只需要記住這節(jié)課最后一句話就可以了，說困難，那是相當?shù)碾y理解，需要一定的耐心，不過還好，KwooJan給大家總結的已經很通俗易懂2010-01-09
- 網頁制作Webjx文章簡介：position屬性可以讓你讓你隨意控制一個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個圖片顯示在瀏覽器的左上角.即使出現(xiàn)2009-04-02