這篇文章是99翻譯Nicolas Gallagher 的CSS background image hacks 一文。大家都知道，目前有很多瀏覽器無法實現(xiàn)背景裁切、背景透明度、背景變換和復(fù)雜背景定位等效果。那么這篇文章將詳細介紹了這幾種背景圖片的處理方法。

正如前面所說，僅僅依靠CSS現(xiàn)有的屬性，我們無法實現(xiàn)背景裁切、背景透明度、背景變換和復(fù)雜背景定位等效果.為了實現(xiàn)這些效果，我們需要借助CSS的其他方法來實現(xiàn)，比如說CSS偽元素，他可以幫助我們模擬出這些CSS無法實現(xiàn)的效果，在開始了解怎么實現(xiàn)這些效果之前，我們一起來看一些DEMO效果，讓我們最初一個概念。

偽元素技巧不需要添加額外的HTML標簽就可以填補瀏覽器對一些CSS特性支持的真空，甚至可以模擬一些還未進入w3c草案的CSS特性，比如今天要說的背景變換、背景透明等等。

今天這篇文章中利用到的偽元素的大部分技巧均在早前的文章Multiple Backgrounds and Borders with CSS 2.1 (如果你看英文有點煩的話，你可以看看由志哥翻譯的文章使用css2.1實現(xiàn)多重背景、多重邊框效果)有做過詳細介紹，在這篇文章中已經(jīng)詳細講解了怎樣利用偽元素模擬CSS的多背景特性和CSS多邊框的特效，文章的Multiple Backgrounds with CSS 2.1 和Multiple Borders with CSS 2.1 頁也展現(xiàn)了一些利用偽元素來實現(xiàn)其他特性的基本原理。

這種方法制作的背景剪裁，目前知道的就支持：Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+

利用css2.1即可模擬背景裁切效果。原理是把背景圖片作為偽元素的背景，而不是作為原本容器的背景。下面第一個例子的效果是裁剪一部分背景，第二個效果可以裁剪css sprite，利用這個特性來制作文字旁邊的小圖片:

某種程度上，相比其他可用的方法使用偽元素是有優(yōu)勢的，偽元素結(jié)合了一些方法的優(yōu)點，而某種程度上又可以規(guī)避他們的缺點

Google、facebook、 twitter 均使用空白dom元素來裁切他們復(fù)雜sprites，用來實現(xiàn)界面上鏈接旁的圖標效果。

偽元素也可以用類似空白dom元素應(yīng)用的方式來使用。同時，使用偽元素不需要依賴額外的html標簽，而且不會過分依靠sprites。此方法的缺點是ie6，7瀏覽器不支持。利用此種方式，可以實現(xiàn)漸進增強，加強支持此特性瀏覽器頁面的表現(xiàn)效果，而低版本瀏覽器仍采用空白元素的辦法，同樣可以完美的得到我們想要的效果。

這個例子展示了如何從一張排列緊密的雪碧圖中裁切出你需要的圖標。裁切尺寸為16*16。只需要創(chuàng)建一個ul列表，在需要生效的部分指定一個class即可

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