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

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

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

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

模擬背景剪裁

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

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

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

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

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

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

應(yīng)用樣式可以以各種方式展示這個(gè)列表，在此基礎(chǔ)上我們利用偽元素，這里你完全可以把偽元素當(dāng)作空白標(biāo)簽來使用 比如span標(biāo)簽。

:Before偽元素的尺寸正好可以匹配sprites的一個(gè)網(wǎng)格（即16*16）。同樣你可以根據(jù)所裁切的部分，隨意設(shè)置偽元素的尺寸

有的時(shí)候你可能不只在一種狀態(tài)下設(shè)置背景圖片，比如說懸浮狀態(tài)下需要改變背景圖片的等。其實(shí)，增加hover, focus, active, 與 “.saved”的情況是為了讓列表在這些情況下也能正確渲染背景位置。


將來的替代方案

將來可以用另一種方式來實(shí)現(xiàn)?；鸷鼮g覽器的私有屬性 -moz-image-rect可以裁切背景。但這個(gè)屬性不被其他瀏覽器支持，而且可能會(huì)被屬于css3背景屬性草案中的一個(gè)標(biāo)識(shí)所取代。據(jù)我所知就位圖圖像而言，現(xiàn)代瀏覽器對(duì)于這個(gè)屬性沒有任何穩(wěn)定的支持。

模擬背景變換

偽元素結(jié)合css3 transform的rotate,scale,skew屬性，可以模擬背景變換。目前沒有提案要求支持背景變換屬性，所以偽元素技巧是唯一可以模擬此效果的方法。

旋轉(zhuǎn)背景圖片

剛剛講解的背景圖片裁切技術(shù)可以減少精靈圖中的圖片個(gè)數(shù)。我們也可以用css來實(shí)現(xiàn)圖片的變形，而不需要使用圖形軟件處理。

實(shí)現(xiàn)上圖的效果，其實(shí)很簡(jiǎn)單，其代碼如下所示：

若想對(duì)背景圖片應(yīng)用變換，而不會(huì)影響到其他元素，需要使用定位來調(diào)整背景圖片的位置，詳細(xì)的可以參考：Multiple Backgrounds and Borders with CSS 2.1 (如果你看英文有點(diǎn)煩的話，你可以看看由志哥翻譯的文章使用css2.1實(shí)現(xiàn)多重背景、多重邊框效果)一文。

這里我們利用了偽元素，給偽元素使用圖片，之后利用絕對(duì)定位跟z-index屬性定位偽元素到內(nèi)容層的下面即可。

背景圖片倒影效果

有時(shí)候會(huì)對(duì)背景圖有這樣的需求，方法類似，不過這次使用的是transform：scale屬性

通過偽元素 利用transform:scaleX(-1), transform:scaleY(-1),
transform:scale(-1,-1) 這三個(gè)屬性你可以沿著x軸，y軸或者沿著中心軸做鏡像對(duì)稱。

下面的例子展示了偽元素模擬的背景變換是怎樣應(yīng)用在一個(gè)翻頁鏈接上的。偽類顯示了一張單獨(dú)的圖片，或者一張精靈圖的一部分，之后進(jìn)行變換。

注意rotation不能得到我們想要的效果，需要使用scale操作

注：這個(gè)屬性ie8以下不支持，即使你用ie的變換濾鏡，偽元素上也不會(huì)生效

未來的解決方案

貌似css草案中沒有相關(guān)的方案，你不需要依靠額外的標(biāo)簽，只需要偽元素就可以實(shí)現(xiàn)背景變換跟背景透.視的效果。

模擬背景位置

Css2.1的background-position屬性計(jì)算圖片偏移只能從元素左側(cè)跟上側(cè)開始計(jì)算。這里可以給偽元素設(shè)置背景圖片，之后把偽元素作為附加的背景層，即可實(shí)現(xiàn)從右側(cè)跟下側(cè)來計(jì)算背景偏移了

這個(gè)技巧可以很容易的結(jié)合其他技巧使用。更多利用偽元素實(shí)現(xiàn)background-position的細(xì)節(jié)可以參考:Multiple Backgrounds and Borders with CSS 2.1 (如果你看英文有點(diǎn)煩的話，你可以看看由志哥翻譯的文章使用css2.1實(shí)現(xiàn)多重背景、多重邊框效果)一文。

在這個(gè)例子里偽元素放置到內(nèi)容層的下面。給偽元素設(shè)置的背景圖片的大小是500px × 300px，因此我們也要設(shè)置偽元素的寬高。

利用絕對(duì)定位，我們也可以調(diào)整偽元素的位置。

未來解決方案

這里的css草案CSS Backgrounds and Borders module  增強(qiáng)了background-position的效果，使其可以從盒子模型的任何一側(cè)開始計(jì)算。到現(xiàn)在為止opera11是唯一可以穩(wěn)定支持這個(gè)屬性的瀏覽器。

模擬背景透明度

改變偽元素的透明度跟直接操縱元素的透明度一樣容易。

注：Ie8及以下利用濾鏡對(duì)偽元素設(shè)置透明度是無效的

我們可以利用定位把偽元素定位在內(nèi)容層下面，這樣就不會(huì)影響內(nèi)容了。之后利用坐標(biāo)或者寬高調(diào)整偽元素的大小，使其適配內(nèi)容。之后給偽元素設(shè)置背景圖片，改變偽元素的透明度就可以了。

這幾種方法可以說將偽元素運(yùn)用的是爐火純青，當(dāng)然他還是有一些限制的，比如說低版本瀏覽器的不兼容，就算是在現(xiàn)代瀏覽器中，偽元素有些效果也不被支持，比如說CSS3的animation屬性在Webkit內(nèi)核下就會(huì)有問題，但話又說回來，他的用處還是很多的，使用偽元素來制作陰影效果，如23 Box-shadow Effects ，使用偽來制作對(duì)話氣泡效果，如Pure CSS speech bubbles 。當(dāng)然還有很多其他的效果。這里就不一一說了。

最后希望這篇譯文對(duì)大家有所幫助，特別是幫助大有增長(zhǎng)思維。