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

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

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

模擬背景剪裁(DEMO)

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

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

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

Google、facebook、 twitter均使用空白dom元素來裁切他們複雜sprites，用來實現介面上鍊接旁的圖示效果。

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

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

<ul class="actions">
  <li class="save"><a href="#">Save</a></li>
  <li class="delete"><a href="#">Delete</a></li>
  <li class="share"><a href="#">Share</a></li>
  <li class="comment"><a href="#">Comment</a></li>
</ul>
 

應用樣式可以以各種方式展示這個列表，在此基礎上我們利用偽元素，這裡你完全可以把偽元素當作空白標籤來使用 比如span標籤。

:Before偽元素的尺寸正好可以匹配sprites的一個網格（即16*16）。同樣你可以根據所裁切的部分，隨意設定偽元素的尺寸

.actions a:before {
   content:"";
   float:left;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url(sprite.png);
}

.save a:before {background-position:0 -16px;}
.delete a:before {background-position:0 -32px;}
.share a:before {background-position:0 -48px;}
.comment a:before {background-position:0 -64px;}

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

.save a:hover:before,
.save a:focus:before,
.save a:active:before {background-position:-16px -16px;}
.saved a:before {background-position:-32px -16px;}

將來的替代方案

將來可以用另一種方式來實現。火狐瀏覽器的私有屬性 -moz-image-rect可以裁切背景。但這個屬性不被其他瀏覽器支援，而且可能會被屬於css3背景屬性草案中的一個標識所取代。據我所知就點陣圖影象而言，現代瀏覽器對於這個屬性沒有任何穩定的支援。

模擬背景變換(DEMO)

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

旋轉背景圖片

剛剛講解的背景圖片裁切技術可以減少精靈圖中的圖片個數。我們也可以用css來實現圖片的變形，而不需要使用圖形軟體處理。

實現上圖的效果，其實很簡單，其程式碼如下所示：

.accordion a:before {
   content:"";
   float:left;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url(sprite.png) no-repeat 0 0;
}

.accordion.open a:before {
   -webkit-transform:rotate(90deg);
   -moz-transform:rotate(90deg);
   -ms-transform:rotate(90deg);
   -o-transform:rotate(90deg);
   transform:rotate(90deg);
}

這裡我們利用了偽元素，給偽元素使用圖片，之後利用絕對定位跟z-index屬性定位偽元素到內容層的下面即可。

背景圖片倒影效果

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

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

下面的例子展示了偽元素模擬的背景變換是怎樣應用在一個翻頁連結上的。偽類顯示了一張單獨的圖片，或者一張精靈圖的一部分，之後進行變換。

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

.prev a:before,
.next a:before {
   content:"";
   float:left;
   width:16px;
   height:16px;
   margin:0 5px 0 0;
   background:url(sprite.png) no-repeat 0 0;
}

.next a:before {
   float:right;
   margin:0 0 0 5px;
   -webkit-transform:scaleX(-1);
   -moz-transform:scaleX(-1);
   -ms-transform:scaleX(-1);
   -o-transform:scaleX(-1);
   transform:scaleX(-1);
}

注：這個屬性ie8以下不支援，即使你用ie的變換濾鏡，偽元素上也不會生效。

未來的解決方案

貌似css草案中沒有相關的方案，你不需要依靠額外的標籤，只需要偽元素就可以實現背景變換跟背景透視的效果。

模擬背景位置（DEMO）

Css2.1的background-position屬性計算圖片偏移只能從元素左側跟上側開始計算。這裡可以給偽元素設定背景圖片，之後把偽元素作為附加的背景層，即可實現從右側跟下側來計算背景偏移了

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

利用絕對定位，我們也可以調整偽元素的位置。

#content {
   position:relative;
   z-index:1;
}

#content:before {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:10px;
   right:10px;
   width:500px;
   height:300px;
   background:url(image.jpg);
}

未來解決方案

這裡的css草案CSS Backgrounds and Borders module 增強了background-position的效果，使其可以從盒子模型的任何一側開始計算。到現在為止opera11是唯一可以穩定支援這個屬性的瀏覽器。

模擬背景透明度(DEMO)

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

注：Ie8及以下利用濾鏡對偽元素設定透明度是無效的

我們可以利用定位把偽元素定位在內容層下面，這樣就不會影響內容了。之後利用座標或者寬高調整偽元素的大小，使其適配內容。之後給偽元素設定背景圖片，改變偽元素的透明度就可以了。

#content {
   position:relative;
   z-index:1;
}

#content:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   bottom:0;
   left:0;
   right:0;
   background:url(image.jpg);
   opacity:0.7;
}

這幾種方法可以說將偽元素運用的是爐火純青，當然他還是有一些限制的，比如說低版本瀏覽器的不相容，就算是在現代瀏覽器中，偽元素有些效果也不被支援，比如說CSS3的animation屬性在Webkit核心下就會有問題，但話又說回來，他的用處還是很多的，使用偽元素來製作陰影效果，如23 Box-shadow Effects，使用偽來製作對話氣泡效果，如Pure CSS speech bubbles。當然還有很多其他的效果。這裡就不一一說了。