css背景圖片的背景裁切、背景透明度、背景變換等效果運(yùn)用
我要評(píng)論這篇文章是99翻譯Nicolas Gallagher 的CSS background image hacks 一文。大家都知道，目前有很多瀏覽器無(wú)法實(shí)現(xiàn)背景裁切、背景透明度、背景變換和復(fù)雜背景定位等效果。那么這篇文章將詳細(xì)介紹了這幾種背景圖片的處理方法。
正如前面所說(shuō)，僅僅依靠CSS現(xiàn)有的屬性，我們無(wú)法實(shí)現(xiàn)背景裁切、背景透明度、背景變換和復(fù)雜背景定位等效果.為了實(shí)現(xiàn)這些效果，我們需要借助CSS的其他方法來(lái)實(shí)現(xiàn)，比如說(shuō)CSS偽元素，他可以幫助我們模擬出這些CSS無(wú)法實(shí)現(xiàn)的效果，在開(kāi)始了解怎么實(shí)現(xiàn)這些效果之前，我們一起來(lái)看一些DEMO效果，讓我們最初一個(gè)概念。
偽元素技巧不需要添加額外的HTML標(biāo)簽就可以填補(bǔ)瀏覽器對(duì)一些CSS特性支持的真空，甚至可以模擬一些還未進(jìn)入w3c草案的CSS特性，比如今天要說(shuō)的背景變換、背景透明等等。
今天這篇文章中利用到的偽元素的大部分技巧均在早前的文章Multiple Backgrounds and Borders with CSS 2.1 (如果你看英文有點(diǎn)煩的話，你可以看看由志哥翻譯的文章使用css2.1實(shí)現(xiàn)多重背景、多重邊框效果)有做過(guò)詳細(xì)介紹，在這篇文章中已經(jīng)詳細(xì)講解了怎樣利用偽元素模擬CSS的多背景特性和CSS多邊框的特效，文章的Multiple Backgrounds with CSS 2.1 和Multiple Borders with CSS 2.1 頁(yè)也展現(xiàn)了一些利用偽元素來(lái)實(shí)現(xiàn)其他特性的基本原理。
模擬背景剪裁
這種方法制作的背景剪裁，目前知道的就支持：Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+
利用css2.1即可模擬背景裁切效果。原理是把背景圖片作為偽元素的背景，而不是作為原本容器的背景。下面第一個(gè)例子的效果是裁剪一部分背景，第二個(gè)效果可以裁剪css sprite，利用這個(gè)特性來(lái)制作文字旁邊的小圖片:
某種程度上，相比其他可用的方法使用偽元素是有優(yōu)勢(shì)的，偽元素結(jié)合了一些方法的優(yōu)點(diǎn)，而某種程度上又可以規(guī)避他們的缺點(diǎn)
Google、facebook、 twitter 均使用空白dom元素來(lái)裁切他們復(fù)雜sprites，用來(lái)實(shí)現(xiàn)界面上鏈接旁的圖標(biāo)效果。
偽元素也可以用類似空白dom元素應(yīng)用的方式來(lái)使用。同時(shí)，使用偽元素不需要依賴額外的html標(biāo)簽，而且不會(huì)過(guò)分依靠sprites。此方法的缺點(diǎn)是ie6，7瀏覽器不支持。利用此種方式，可以實(shí)現(xiàn)漸進(jìn)增強(qiáng)，加強(qiáng)支持此特性瀏覽器頁(yè)面的表現(xiàn)效果，而低版本瀏覽器仍采用空白元素的辦法，同樣可以完美的得到我們想要的效果。
這個(gè)例子展示了如何從一張排列緊密的雪碧圖中裁切出你需要的圖標(biāo)。裁切尺寸為16*16。只需要?jiǎng)?chuàng)建一個(gè)ul列表，在需要生效的部分指定一個(gè)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>
應(yīng)用樣式可以以各種方式展示這個(gè)列表，在此基礎(chǔ)上我們利用偽元素，這里你完全可以把偽元素當(dāng)作空白標(biāo)簽來(lái)使用 比如span標(biāo)簽。
:Before偽元素的尺寸正好可以匹配sprites的一個(gè)網(wǎng)格（即16*16）。同樣你可以根據(jù)所裁切的部分，隨意設(shè)置偽元素的尺寸
.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;}
有的時(shí)候你可能不只在一種狀態(tài)下設(shè)置背景圖片，比如說(shuō)懸浮狀態(tài)下需要改變背景圖片的等。其實(shí)，增加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;}
將來(lái)的替代方案
將來(lái)可以用另一種方式來(lái)實(shí)現(xiàn)?；鸷鼮g覽器的私有屬性 -moz-image-rect可以裁切背景。但這個(gè)屬性不被其他瀏覽器支持，而且可能會(huì)被屬于css3背景屬性草案中的一個(gè)標(biāo)識(shí)所取代。據(jù)我所知就位圖圖像而言，現(xiàn)代瀏覽器對(duì)于這個(gè)屬性沒(méi)有任何穩(wěn)定的支持。
模擬背景變換
偽元素結(jié)合css3 transform的rotate,scale,skew屬性，可以模擬背景變換。目前沒(méi)有提案要求支持背景變換屬性，所以偽元素技巧是唯一可以模擬此效果的方法。
旋轉(zhuǎn)背景圖片
剛剛講解的背景圖片裁切技術(shù)可以減少精靈圖中的圖片個(gè)數(shù)。我們也可以用css來(lái)實(shí)現(xiàn)圖片的變形，而不需要使用圖形軟件處理。
實(shí)現(xiàn)上圖的效果，其實(shí)很簡(jiǎn)單，其代碼如下所示：
.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);
}
若想對(duì)背景圖片應(yīng)用變換，而不會(huì)影響到其他元素，需要使用定位來(lái)調(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ì)背景圖有這樣的需求，方法類似，不過(guò)這次使用的是transform：scale屬性
通過(guò)偽元素 利用transform:scaleX(-1), transform:scaleY(-1),
transform:scale(-1,-1) 這三個(gè)屬性你可以沿著x軸，y軸或者沿著中心軸做鏡像對(duì)稱。
下面的例子展示了偽元素模擬的背景變換是怎樣應(yīng)用在一個(gè)翻頁(yè)鏈接上的。偽類顯示了一張單獨(dú)的圖片，或者一張精靈圖的一部分，之后進(jìn)行變換。
注意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);
}
注：這個(gè)屬性ie8以下不支持，即使你用ie的變換濾鏡，偽元素上也不會(huì)生效
未來(lái)的解決方案
貌似css草案中沒(méi)有相關(guān)的方案，你不需要依靠額外的標(biāo)簽，只需要偽元素就可以實(shí)現(xiàn)背景變換跟背景透.視的效果。
模擬背景位置
Css2.1的background-position屬性計(jì)算圖片偏移只能從元素左側(cè)跟上側(cè)開(kāi)始計(jì)算。這里可以給偽元素設(shè)置背景圖片，之后把偽元素作為附加的背景層，即可實(shí)現(xiàn)從右側(cè)跟下側(cè)來(lái)計(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)整偽元素的位置。
#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);
}
未來(lái)解決方案
這里的css草案CSS Backgrounds and Borders module 增強(qiáng)了background-position的效果，使其可以從盒子模型的任何一側(cè)開(kāi)始計(jì)算。到現(xiàn)在為止opera11是唯一可以穩(wěn)定支持這個(gè)屬性的瀏覽器。
模擬背景透明度
改變偽元素的透明度跟直接操縱元素的透明度一樣容易。
注：Ie8及以下利用濾鏡對(duì)偽元素設(shè)置透明度是無(wú)效的
我們可以利用定位把偽元素定位在內(nèi)容層下面，這樣就不會(huì)影響內(nèi)容了。之后利用坐標(biāo)或者寬高調(diào)整偽元素的大小，使其適配內(nèi)容。之后給偽元素設(shè)置背景圖片，改變偽元素的透明度就可以了。
#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;
}
這幾種方法可以說(shuō)將偽元素運(yùn)用的是爐火純青，當(dāng)然他還是有一些限制的，比如說(shuō)低版本瀏覽器的不兼容，就算是在現(xiàn)代瀏覽器中，偽元素有些效果也不被支持，比如說(shuō)CSS3的animation屬性在Webkit內(nèi)核下就會(huì)有問(wèn)題，但話又說(shuō)回來(lái)，他的用處還是很多的，使用偽元素來(lái)制作陰影效果，如23 Box-shadow Effects ，使用偽來(lái)制作對(duì)話氣泡效果，如Pure CSS speech bubbles 。當(dāng)然還有很多其他的效果。這里就不一一說(shuō)了。
最后希望這篇譯文對(duì)大家有所幫助，特別是幫助大有增長(zhǎng)思維。
相關(guān)文章
詳解CSS3的opacity屬性設(shè)置透明效果的用法
這篇文章主要介紹了詳解CSS3的opacity屬性設(shè)置透明效果的用法,同時(shí)還講到了opacity透明度帶有的繼承性影響子集元素的問(wèn)題,值得初學(xué)者注意,需要的朋友可以參考下2016-05-09CSS3中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié)
這篇文章主要介紹了CSS中文字鏤空、透明值、陰影效果設(shè)置示例小結(jié),其中通過(guò)text-stroke-color透明值的設(shè)置可以讓文字在某些程度上更加柔和,需要的朋友可以參考下2016-03-07
css3實(shí)現(xiàn)的半透明遮罩lightbox效果源碼
是一段實(shí)現(xiàn)了突出主圖片的半透明遮罩lightbox效果代碼，當(dāng)點(diǎn)擊一張圖片時(shí)，這樣圖片會(huì)無(wú)刷新彈出放大顯示，而周圍的圖片會(huì)被半透明在原位遮罩起來(lái)，本段代碼適應(yīng)于所有網(wǎng)頁(yè)2015-10-22純CSS實(shí)現(xiàn)多級(jí)半透明效果菜單代碼
這篇文章主要為大家介紹了純CSS實(shí)現(xiàn)多級(jí)半透明效果菜單代碼,通過(guò)純css實(shí)現(xiàn)多級(jí)菜單效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-01css+filter實(shí)現(xiàn)簡(jiǎn)單的圖片透明效果
本文給大家介紹的是CSS結(jié)合filter實(shí)現(xiàn)簡(jiǎn)單的圖片透明效果的實(shí)例，主要使用filter的功能對(duì)圖片元素進(jìn)行透明度控制,需要的朋友可以參考下2015-01-13- PNG透明效果的CSS定義有很多，但兼容各瀏覽器的卻很少，如此，本例的介紹是有必要的了，下面是實(shí)現(xiàn)，需要的朋友可以參考下2014-09-17
- 想不想要自己的主頁(yè)鏈接很炫呢，背景半透明的鏈接效果，空鏈接實(shí)現(xiàn)的鏈接效果，只需要定義一個(gè)特效式的CSS樣式即可以實(shí)現(xiàn)，在需要實(shí)現(xiàn)的地方應(yīng)用定義的CSS樣式，也可以全站2013-02-27
- 一款使用CSS的Alpha透明度實(shí)現(xiàn)的圖片鏈接效果，鼠標(biāo)放上后圖片會(huì)變?yōu)榘胪该?，然后出現(xiàn)文字介紹，+可以加入其它功能，一般是加入收藏，根據(jù)你的需要了，可以自己改2011-12-20
CSS實(shí)現(xiàn)背景圖片透明而文字不透明效果的兩種方法
這篇文章主要介紹了CSS實(shí)現(xiàn)背景圖片透明而文字不透明效果的兩種方法,需要的朋友可以參考下2017-04-25
