這篇文章是99翻譯Nicolas Gallagher 的CSS background image hacks 一文。大家都知道，目前有很多瀏覽器無法實現背景裁切、背景透明度、背景變換和復雜背景定位等效果。那么這篇文章將詳細介紹了這幾種背景圖片的處理方法。
正如前面所說，僅僅依靠CSS現有的屬性，我們無法實現背景裁切、背景透明度、背景變換和復雜背景定位等效果.為了實現這些效果，我們需要借助CSS的其他方法來實現，比如說CSS偽元素，他可以幫助我們模擬出這些CSS無法實現的效果，在開始了解怎么實現這些效果之前，我們一起來看一些DEMO效果，讓我們最初一個概念。
偽元素技巧不需要添加額外的HTML標簽就可以填補瀏覽器對一些CSS特性支持的真空，甚至可以模擬一些還未進入w3c草案的CSS特性，比如今天要說的背景變換、背景透明等等。
: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背景屬性草案中的一個標識所取代。據我所知就位圖圖像而言，現代瀏覽器對于這個屬性沒有任何穩定的支持。
模擬背景變換偽元素結合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);
}
若想對背景圖片應用變換，而不會影響到其他元素，需要使用定位來調整背景圖片的位置，詳細的可以參考：Multiple Backgrounds and Borders with CSS 2.1 (如果你看英文有點煩的話，你可以看看由志哥翻譯的文章使用css2.1實現多重背景、多重邊框效果)一文。
這里我們利用了偽元素，給偽元素使用圖片，之后利用絕對定位跟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草案中沒有相關的方案，你不需要依靠額外的標簽，只需要偽元素就可以實現背景變換跟背景透視的效果。
模擬背景位置Css2.1的background-position屬性計算圖片偏移只能從元素左側跟上側開始計算。這里可以給偽元素設置背景圖片，之后把偽元素作為附加的背景層，即可實現從右側跟下側來計算背景偏移了
這個技巧可以很容易的結合其他技巧使用。更多利用偽元素實現background-position的細節可以參考:Multiple Backgrounds and Borders with CSS 2.1 (如果你看英文有點煩的話，你可以看看由志哥翻譯的文章使用css2.1實現多重背景、多重邊框效果)一文。
在這個例子里偽元素放置到內容層的下面。給偽元素設置的背景圖片的大小是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是唯一可以穩定支持這個屬性的瀏覽器。
模擬背景透明度改變偽元素的透明度跟直接操縱元素的透明度一樣容易。
注：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 。當然還有很多其他的效果。這里就不一一說了。
最后希望這篇譯文對大家有所幫助，特別是幫助大有增長思維。
歡迎轉載：http://www.kanwencang.com/bangong/20161116/55399.html
文章列表
留言列表
