css實現對背景圖片的定位,獲得一張圖片上不同位置的內容
阿新 • • 發佈:2019-02-19
實現這個小技巧也不是新鮮事。
使用CSS的背景屬性,實現對背景的定位,這樣就可以根據需要取出不到的影象位置實現只讀一次,多處使用。
實現起來不難,最根本的程式碼就是:background-position:X Y,用於定位背景圖片。
下面有個例子,以例說話:
這是我用於實現一個wiki視覺化編輯器時所用到的。wikiTool.gif(16*352,有22個圖示) 這張圖片有所有的工具按鈕圖示,tool1,tool2就分別是不同的按鈕。每個按鈕就是16*16畫素。
#tool1,#tool2{
background:url(wikiTool.gif) no-repeat;
border:1px solid;
width:16px;
height:16px;
float:left;
}
#tool1{
background-position:0px 0px; //這裡是取出第一個按鈕的圖示
}
#tool2{
background-position:0px -16px; //這裡是取出第二個按鈕的圖示
}
<div id="tool1"></div>
<div id="tool2"></div>