CSS中背景background-position負值定位深入理解

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS中背景background-position負值定位深入理解

編輯：CSS詳解

核心提示：CSS中背景定位background-position負值一直是不好理解的難點，一方面用的比較少，另一方面的理解的不夠深入，今天花了點時間認真的思考了，把我的心得寫出來詳細出處參考

下面是我要用到的一個背景圖：

CSS

代碼如下：
<!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" >  </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塊並加入三種不同位置的背景圖片，
　　在浏覽器中看到的效果：

CSS

　　從上圖可以看到：當為background-position:0 0;時圖片的左上角與DIV的左上角是重合的，當我們定位於background-position:-50px -50px;時發現圖片向左、上移動了，也就以DIV的左上角為中心，圖向左移動了50PX，向上也移動了50PX．第三個示例采用的都是正值，可以解解釋為圖向右、向下移動的效果．這個應該是好理解的．
　　總結一下就是以上都是以DIV的0，0點為參考點圖片移動，如果把DIV區解釋為一個坐標軸圖，向左，上都為負，向右，下為正值．

　　好象說這麼多你也記不住，那我就告訴你，你應該記住什麼吧！

　　在實踐中多數情況是知道一個圖的位置要如上圖中那個黃色的點，我們應該在效果圖上量出它的長度得出兩個值都是150PX,那我們定義圖的位置就要寫background-position:-150px -150px;這樣就定義好了,在圖上的量法就看下圖（這張圖相當於你用的效果圖或稱設計圖），記住這張圖相信你一定能掌握背景圖負值的方法了。

CSS

CSS詳解

CSS:提高網頁在浏覽器的渲染速度: 原文：http://www.zishu.cn/blogvIEw.ASP?logID=773最近很少
CSS失效怎麼辦？請檢查網頁最頭部是否包含Doctype標簽: CSS是正確的，鏈接也沒有出錯，這時你就需要檢查你的網頁最頭部是否包含Doctype標簽了，合適的
CSS實例:創建一個鼠標感應換圖片的按鈕: 這個CSS教程將教你如何使用CSS創造一個漂亮的動態按鈕，所謂動態，指的是默認狀態和聚焦狀態時背

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章