2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

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

?? ??? 介紹完這一個關(guān)鍵的技術(shù)之后，要想實現(xiàn)最后的效果，還得需要你給所要設(shè)置的元素加一個高寬的限制，這樣在無形中就相當(dāng)于對整張背景圖片進(jìn)行裁剪。并且結(jié)合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;}

?? ???

轉(zhuǎn)載于:https://my.oschina.net/sunshinewyf/blog/483860

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。