相信很多喜歡研究網頁界面的童鞋都遇到過一個奇妙的現象：網頁中很多圖片素材被合成在一張圖片上。

起初小菜模仿網站的時候，經常遇到這個現象，那時候也不知道這時什么技術，人家的整張圖片素材不會利用，只能用ps切圖，切成單個的再用。。。

其實，這是一個非常簡單的技術，就是因為想象的太難了，才一直找不到問題的關鍵。

要想實現CSS摳圖，只需要用到一個屬性：background-position。

按照字面理解，這個屬性就是背景定位，先看看google網站的素材圖，如下：

假如小菜現在想做一個+1按鈕，利用上邊的素材圖，普通狀態顯示A圖，鼠標移上去顯示后顯示B圖，實現這么一個動態效果。

按鈕是用來實現功能的，一般是用超鏈接響應單擊事件，但是不能把背景圖直接加在超鏈接上，那樣就不叫樣式啦，因為超鏈接的文本長度變化時，樣式也變了。

地球人一般的做法是，div里邊套一個超鏈接，超鏈接負責實現功能，div負責裝載背景圖。html結構如下：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表