2019獨角獸企業重金招聘Python工程師標準>>>

? 以前做網站的時候，經常有地方要用小圖標。第一次接觸bootstrap的時候，下載打開它的源文件的時候只看到了兩張圖，就是包含很多小圖標的大圖。總所周知，bootstrap用到圖標的地方很多，但是我一直不知道他們是怎么做到的。今天再寫一個JavaScript demo的時候，又遇到了這個問題。所以就趁此機會研究了一下：
????? 這是一種關于css sprites的技術，就是將多張圖放在一張大圖中，然后通過css的background-position屬性來實現的。采用這種方法，有如下：
????? （1）通過整合圖片，從而減少服務器的請求次數，加快加載速度。
????? 要實現這個效果，還得研究一下background-position。
????? background-position說明：
????? 該樣式是指設置背景圖片的位置：并且必須制定background-image屬性，該屬性定位不受對象的補丁屬性( padding )設置影響。
????? 可能的值：
????? （1）
?? ???? top left
?? ???? top center
?? ???? top right
?? ???? center left
?? ???? center center
?? ???? center right
?? ???? bottom left
?? ???? bottom center
?? ???? bottom right
?? ???? 當只給定一個值時，則第二個值默認為center
?? ??? （2) x% y%
?? ??? 第一個指的是水平值，第二個指的是垂直方向上的值，左上角是 0% 0%。右下角是 100% 100%。如果僅規定了一個值，另一個值將是 50%。
?? ??? （3）x ,y
?? ??? 第一個值指的是水平方向上的具體偏移值，第二個值指的是垂直方向上的具體偏移值
?? ??? 左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。如果您僅規定了一個值，另一個值將是50%。您可以混合使用 % 和 position 值。

?? ??? 介紹完這一個關鍵的技術之后，要想實現最后的效果，還得需要你給所要設置的元素加一個高寬的限制，這樣在無形中就相當于對整張背景圖片進行裁剪。并且結合overflow：hidden屬性。

?? ??? 實例：

在一個提交按鈕中假如搜索背景圖：

????????????? <input type="submit" class="submit" value=""/>

css樣式：

.submit{background:#ffb900 url(hpc14.png) no-repeat; width:37px;height: 37px;border: 5px solid #ffb900;background-position: -224px -52p;overfkow:hidden;}

?? ???

轉載于:https://my.oschina.net/sunshinewyf/blog/483860

總結

以上是生活随笔為你收集整理的将多张图整合到一张大图中，再用css定位技术的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。