當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

从CSS透明谈起

發(fā)布時(shí)間：2024/6/5 CSS 52 豆豆

生活随笔收集整理的這篇文章主要介紹了从CSS透明谈起小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

今天受朋友所托做一個(gè)主頁頁面，美工不是我做的，我看了一下PSD文件簡直要暈過去：很多透明和發(fā)光效果…… 再回想一下以前被IE6折磨的情景……

?沒辦法，只要硬著頭皮上，通過多重PNG圖像的透明來達(dá)到效果，不過這里遇到了IE6不能顯示PNG透明效果的難題，因?yàn)橹奥犨^說可以用濾鏡解決，所以上網(wǎng)搜了一下果然有，不過還是有一些限制，挺麻煩的，待會我會詳細(xì)談?wù)劇?/p>

?先不急著說怎么處理包含透明元素的PNG圖片，這里先從簡單的透明效果談起，畢竟這可能是最常使用的一個(gè)效果。

?CSS透明

?IE的Alpha濾鏡

?想讓元素在ie中顯示30%的透明度可以在元素的css屬性列表中添加

filter:alpha(opacity=30);

通過ie的alpha濾鏡（alpha濾鏡有更加強(qiáng)大的功能，后面會提到）達(dá)到透明效果

如果想通過JavaScript改變元素的透明度，有兩種方法：

obj.filters.alpha.opacity?=?value;

或者另一種比較直觀的方式

obj.style.filter?=?'alpha(opacity='?+?value?+?')';

這里要注意兩種方法中filter的單復(fù)數(shù)形式。其中第一種方法中filters對象是ie特有的對象，因此我們可以通過判斷filter對象是否存在來判定客戶端是否使用ie瀏覽器。

?Firefox和Opera的opacity屬性

?Firefox和Opera中沒有濾鏡（不知道我這樣理解是否正確），要令Firefox和Opera中的元素透明，可以使用一個(gè)ie沒有的css屬性：opacity。簡單地，我們可以在css列表中加入

opacity?=?0.3;

注意，這里opacity的最大值（即不透明）為1，而不是類似ie的alpha屬性中opacity參數(shù)一樣以100表示不透明。

想通過JavaScript改變透明度只需要使用通常改變css屬性的方法就行了。

?CrossBrowers

最后我們根據(jù)上述區(qū)別，寫一個(gè)通用的（跨瀏覽器的）設(shè)置元素透明屬性的函數(shù)

function?setOpacity(elem,?level)?{
????if?(elem.filters)?
????????elem.style.filter?=?'alpha(opacity='?+?level?+?')';
????else
????????elem.style.opacity?=?level?/?100;
}

alpha更進(jìn)一步

雖然僅僅只有ie支持濾鏡，但是這里還是想進(jìn)一步說說。畢竟這和ie的其他非兼容性不同，濾鏡是ie的一個(gè)比較優(yōu)秀的擴(kuò)展，是標(biāo)準(zhǔn)之外的東西，而不是違反標(biāo)準(zhǔn)，我們甚至希望它能夠上升為標(biāo)準(zhǔn)，這樣我們就可以通過濾鏡簡單處理圖片做出更加漂亮的效果了。

看看下面這個(gè)效果：

這里是以上效果所使用的代碼：

Code
<script?type="text/javascript">
function?setAlpha()?{
????var?temp?=?document.getElementById('test');
????val?=?parseInt(temp.filters.alpha.style);
????if(++val>3)?val?=?0;
????temp.filters.alpha.style?=?val;
}
</script>
<style?type="text/css">
#test?{?
width:300px;?height:100px;?border:1px?solid?#000;?background-color:#0000FF;?
filter:alpha(opacity=100,?finishopacity=0,?style?=?0);?}
</style>
<div?id="test"></div>
<input?type="button"?value="點(diǎn)擊查看三種效果"?onclick="setAlpha()"?/>

除了效果里使用到的 opacity / finishopacity / style 參數(shù)之外，還有 enable / startx / starty / finishx / finshy ，enable可以設(shè)置或檢索濾鏡是否激活，其他四個(gè)和透明效果的起始位置有關(guān)，這里就不贅述了。

實(shí)現(xiàn)透明的另一種方式：PNG

吃了個(gè)宵夜回來，發(fā)現(xiàn)已經(jīng)有人評論了呵呵，并且是久違了的Cat Chen師兄哈哈～多謝指點(diǎn)！繼續(xù)努力把剩下的寫完～～

PNG圖片算是較為普遍的解決透明問題的一種方式了，并且你可以任意制作自己喜歡的漸變方式，而不像alpha濾鏡那樣只能在ie上呈現(xiàn)。本來我們可以自由地使用png圖片，IE7、Firefox和Opera都有很好的支持，然而IE6至今還沒有“退出江湖”，我們不得不將其列入考慮范圍之內(nèi)。所以對于PNG圖片的透明問題，實(shí)際上是解決PNG圖片在IE6上的顯示問題。

這個(gè)問題通過界面濾鏡AlphaImageLoader解決。

PNG透明圖片作為背景

先看看效果（注意，以下測試僅適用于ie6）

這是演示效果的代碼（不好意思，借用sccnn上一個(gè)png圖片～）

Code
<style?type="text/css">
#test2?{
width:250px;?height:150px;
background-color:#000;
background-image:url(http://online.sccnn.com/icon/980/Euro_2008_002.png);?
background-repeat:no-repeat;
_background-image:none;
_filter:?progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://online.sccnn.com/icon/980/Euro_2008_002.png",?sizingMethod=crop);
}
</style>

<script>
var?vals?=?new?Array('image',?'crop',?'scale');
var?n?=?0;
var?str?=?'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://online.sccnn.com/icon/980/Euro_2008_002.png",sizingMethod=';

function?setAlphaImageLoader()?{
????var?temp?=?document.getElementById('test2');
????if(++n?>?2)?n?=?0;
????temp.style.filter?=?str?+?vals[n]?+?')';
}
</script>

<div?id="test2"></div>
<input?type="button"?value="點(diǎn)擊查看三種效果"?onclick="setAlphaImageLoader()"?/>

你可以通過這種方法兼容ie6的png透明問題。

這里有個(gè)小技巧要解釋一下，css屬性前加“_”下劃線僅有ie6能識別，因此剛好在這個(gè)地方得到應(yīng)用。因此也要注意把兩個(gè)加下劃線的屬性置于最后，如果是ie6就會將原背景圖屬性設(shè)為none覆蓋之前的圖片，并且啟用alphaimageloader濾鏡。另外濾鏡中的src參數(shù)，需要注意的是，你可以在這里使用相對地址，但是這個(gè)地址必須是頁面所在位置的相對地址，而不是樣式表的相對地址。

img標(biāo)簽中的png

這個(gè)可以使用前面修改css的方法，網(wǎng)上可以搜到一段據(jù)聞是“官方解決方案”的代碼，也是使用前述濾鏡。下面是代碼：

Code
function?correctPNG()?//?correctly?handle?PNG?transparency?in?Win?IE?5.5?&?6.
{
???var?arVersion?=?navigator.appVersion.split("MSIE")
???var?version?=?parseFloat(arVersion[1])
???if?((version?>=?5.5)?&&?(document.body.filters))?
???{
??????for(var?j=0;?j<document.images.length;?j++)
??????{
?????????var?img?=?document.images[j]
?????????var?imgName?=?img.src.toUpperCase()
?????????if?(imgName.substring(imgName.length-3,?imgName.length)?==?"PNG")
?????????{
????????????var?imgID?=?(img.id)???"id='"?+?img.id?+?"'?"?:?""
????????????var?imgClass?=?(img.className)???"class='"?+?img.className?+?"'?"?:?""
????????????var?imgTitle?=?(img.title)???"title='"?+?img.title?+?"'?"?:?"title='"?+?img.alt?+?"'?"
????????????var?imgStyle?=?"display:inline-block;"?+?img.style.cssText?
????????????if?(img.align?==?"left")?imgStyle?=?"float:left;"?+?imgStyle
????????????if?(img.align?==?"right")?imgStyle?=?"float:right;"?+?imgStyle
????????????if?(img.parentElement.href)?imgStyle?=?"cursor:hand;"?+?imgStyle
????????????var?strNewHTML?=?"<span?"?+?imgID?+?imgClass?+?imgTitle
????????????+?"?style=\""?+?"width:"?+?img.width?+?"px;?height:"?+?img.height?+?"px;"?+?imgStyle?+?";"
????????????+?"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
????????????+?"(src=\'"?+?img.src?+?"\',?sizingMethod='scale');\"></span>"?
????????????img.outerHTML?=?strNewHTML
????????????j?=?j-1
?????????}
??????}
???}????
}

只要在頁面加載完畢之后運(yùn)行這行代碼就行了，測試過沒問題。不過如果頁面動態(tài)更換了png圖片，可能要重新執(zhí)行這個(gè)函數(shù)。

?轉(zhuǎn)自 http://www.cnblogs.com/zhengchuyu/archive/2008/07/30/1256890.html

轉(zhuǎn)載于:https://www.cnblogs.com/dsliang/archive/2009/10/19/1585927.html

總結(jié)

以上是生活随笔為你收集整理的从CSS透明谈起的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

css
透明