資訊專欄INFORMATION COLUMN
摘要：我們都知道屬性用來指定背景圖片應該出現的位置，可以使用關鍵字絕對值和相對值進行指定。使用相對值時，定位方式直觀上不好理解。但應清楚，最基本的方法是根據絕對值定位。上圖經過計算，背景圖片左上角被定位在處，故背景圖片被切除一半。
我們都知道background-position屬性用來指定背景圖片應該出現的位置，可以使用關鍵字、絕對值和相對值進行指定。在CSS Sprites中，這個屬性使用比較頻繁，使用過程中，我常混淆，經常切不到自己想要的效果，于是決定好好理解其工作機制，這篇文章就是介紹background-position屬性是如何指定背景圖片和背景區域的位置關系。
注意：segmentfault對CodePen嵌入支持度不是很好，為使文章整潔，我將嵌入代碼全部刪除，完整體驗請猛戳此處！
background-position我使用ps制作了一張400px × 400px的圖片作為背景圖片。
此處應有代碼，猛戳此處！
為了更好理解background-position屬性定位的機制，我們可以將指定背景區域想象為一個平面直角坐標系，原點在左上角，x軸正方向從左到右，y軸正方向從上到下，這點和平常向上為y軸正方向的坐標系有所不同。在這個坐標系中，通過指定x、y的坐標值定位一個點，此點即是背景圖片的左上角。
此處應有代碼，猛戳此處！
如上圖所示，background-position指定值200px和300px，即x為200px，y為300px，此點所在位置就是背景圖片的左上角，因為部分背景圖片因溢出背景區域被裁剪，就只剩下200px × 100px的左上角部分。
此處應有代碼，猛戳此處！
可以指定正值就當然可以指定負值，如上所示，此時左上角被定位在(0px, -300px)處，因為向上為y軸負方向，背景圖片上半的300px就因溢出被切除了，只留下400px × 100px的下部分。
此處應有代碼，猛戳此處！
除了使用絕對值，也可以使用相對值指定。使用相對值時，定位方式直觀上不好理解。但應清楚，最基本的方法是根據絕對值定位。使用相對值時它會將其轉換，最終還是根據絕對值指定背景圖片的左上角，轉化的依據是x = (容器的寬度-圖片的寬度) * percentX;y = (容器的高度-圖片的高度) * percentY。上圖經過計算，背景圖片左上角被定位在(-200px, 0px)處，故背景圖片被切除一半。
此處應有代碼，猛戳此處！
我們也可以通過關鍵字top、bottom、left、right和center指定background-position屬性，大家應該都喜歡這種簡單明了的方式吧。一般指定兩個關鍵字，如果只有一個，則另一個默認是center。這種方式也最終將轉化成絕對值定位，不過先會轉換成百分比，top、bottom、left、right和center分別相當于0%、100%、0%、100%和50%。上圖中的background-position: right bottom;和background-position: 100% 100%;效果是一模一樣的。
CSS Sprites使用上面介紹的理解方式，相信還是很好理解background-position的定位原理的。我想，background-position多數使用場景應該就是CSS Sprites了。CSS Sprites是一種網頁圖片應用處理方式，將一個頁面涉及到的零星圖片都包含到一張大圖中去。這樣一來，當訪問該頁面時，客戶端只需要向服務器請求少量的圖片，圖片越多請求次數越少，造成延遲的可能性也就越小，能有效減輕服務器的壓力；接下來應用CSS屬性的background-image、background-position的組合進行背景定位，用數字精確地定位出背景圖片的位置。
參考資料CSS背景:css background屬性全解析
background-position
CSS Sprites
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116870.html
摘要：網上有很多前端的學習路徑文章，大多是知識點羅列為主或是資料的匯總，數據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告，發送獲取資料，就能收到下載密碼，網盤地址在最下方，獲取教程和案例的資料。 前言 好的學習方法可以事半功倍，好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑，還要寫學習方法，還要發資料，干貨滿滿，準備接招。 網上有很多前端的學習路徑文章，大多是知...
摘要：原文地址本篇文章是筆者的設計指南學習筆記的第二部分，由于最近都在準備期末考的事，所以都沒來得及對設計指南進行一些總結，沒有看之前第一部分的話也可以從這里傳送過去。 原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是筆者的 《CSS 設計指南》 學習筆記的第二部分，由于最近都在準備期末考的事，所以都沒來得及對 ...
摘要：子選擇器只對直接后代有影響的選擇器，而對孫子后代以及多層后代不產生作用。爛透了盡可能使用復合語法糟糕好的避免不必要的重復糟糕好的組織好的代碼格式代碼的易讀性和易維護性成正比。 標簽與元素 標簽和p元素有什么區別呢？大多數時候他們表示的是同一樣東西，但仍有細微的區別。、等指的是HTML分隔符，而元素則是由一對開始結束標簽構成的，用來包含某一些內容 子選擇器和后代選擇器的區別： 后代選擇器...
摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關于基礎特性，一份關于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南，包含使用的好處介紹個方法快速寫成高質量的寫出高效的一些提示。 迄今為止，我已經收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...
摘要：任務四一個最常見的移動端頁面完成的事情完成簡單布局，然后填充界面與效果圖對比優化完成驗收要求擴展性頂欄固定進行樣式兼容性研究完成任務四深度思考跟隨深度思考師兄建議進行修改輸入欄左側換用輸入限制電話位，密碼位根據結構的語義化修改嘗試下再加一 任務四、 一個最常見的移動端頁面 完成的事情 完成簡單布局，然后填充界面 與效果圖對比優化 完成驗收要求：header擴展性 & 頂欄固定 進行p...
閱讀 3925·2021-10-12 10:12
閱讀 2886·2021-09-10 11:18
閱讀 3673·2019-08-30 15:54
閱讀 2808·2019-08-30 15:53
閱讀 638·2019-08-30 13:54
閱讀 965·2019-08-30 13:21
閱讀 2260·2019-08-30 12:57
閱讀 1687·2019-08-30 11:10
