从CSS透明谈起
今天受朋友所托做一個主頁頁面,美工不是我做的,我看了一下PSD文件簡直要暈過去:很多透明和發光效果…… 再回想一下以前被IE6折磨的情景……
?沒辦法,只要硬著頭皮上,通過多重PNG圖像的透明來達到效果,不過這里遇到了IE6不能顯示PNG透明效果的難題,因為之前聽過說可以用濾鏡解決,所以上網搜了一下果然有,不過還是有一些限制,挺麻煩的,待會我會詳細談談。
?先不急著說怎么處理包含透明元素的PNG圖片,這里先從簡單的透明效果談起,畢竟這可能是最常使用的一個效果。
?CSS透明
?IE的Alpha濾鏡
?想讓元素在ie中顯示30%的透明度可以在元素的css屬性列表中添加
filter:alpha(opacity=30);?
通過ie的alpha濾鏡(alpha濾鏡有更加強大的功能,后面會提到)達到透明效果
如果想通過JavaScript改變元素的透明度,有兩種方法:
?
obj.filters.alpha.opacity?=?value;或者另一種比較直觀的方式
obj.style.filter?=?'alpha(opacity='?+?value?+?')';?
這里要注意兩種方法中filter的單復數形式。其中第一種方法中filters對象是ie特有的對象,因此我們可以通過判斷filter對象是否存在來判定客戶端是否使用ie瀏覽器。
?Firefox和Opera的opacity屬性
?Firefox和Opera中沒有濾鏡(不知道我這樣理解是否正確),要令Firefox和Opera中的元素透明,可以使用一個ie沒有的css屬性:opacity。簡單地,我們可以在css列表中加入
?
opacity?=?0.3;?
注意,這里opacity的最大值(即不透明)為1,而不是類似ie的alpha屬性中opacity參數一樣以100表示不透明。
?
想通過JavaScript改變透明度只需要使用通常改變css屬性的方法就行了。
?CrossBrowers
?
最后我們根據上述區別,寫一個通用的(跨瀏覽器的)設置元素透明屬性的函數
?
function?setOpacity(elem,?level)?{????if?(elem.filters)?
????????elem.style.filter?=?'alpha(opacity='?+?level?+?')';
????else
????????elem.style.opacity?=?level?/?100;
}
?
alpha更進一步
?
雖然僅僅只有ie支持濾鏡,但是這里還是想進一步說說。畢竟這和ie的其他非兼容性不同,濾鏡是ie的一個比較優秀的擴展,是標準之外的東西,而不是違反標準,我們甚至希望它能夠上升為標準,這樣我們就可以通過濾鏡簡單處理圖片做出更加漂亮的效果了。
?
看看下面這個效果:
?
?
這里是以上效果所使用的代碼:
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="點擊查看三種效果"?onclick="setAlpha()"?/>
?
除了效果里使用到的 opacity / finishopacity / style 參數之外,還有 enable / startx / starty / finishx / finshy ,enable可以設置或檢索濾鏡是否激活,其他四個和透明效果的起始位置有關,這里就不贅述了。
?
實現透明的另一種方式:PNG
?
吃了個宵夜回來,發現已經有人評論了呵呵,并且是久違了的Cat Chen師兄哈哈~多謝指點! 繼續努力把剩下的寫完~~
?
PNG圖片算是較為普遍的解決透明問題的一種方式了,并且你可以任意制作自己喜歡的漸變方式,而不像alpha濾鏡那樣只能在ie上呈現。本來我們可以自由地使用png圖片,IE7、Firefox和Opera都有很好的支持,然而IE6至今還沒有“退出江湖”,我們不得不將其列入考慮范圍之內。所以對于PNG圖片的透明問題,實際上是解決PNG圖片在IE6上的顯示問題。
?
這個問題通過界面濾鏡AlphaImageLoader解決。
?
PNG透明圖片作為背景
?
先看看效果(注意,以下測試僅適用于ie6)
?
?
這是演示效果的代碼(不好意思,借用sccnn上一個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="點擊查看三種效果"?onclick="setAlphaImageLoader()"?/>
?
你可以通過這種方法兼容ie6的png透明問題。
?
這里有個小技巧要解釋一下,css屬性前加“_”下劃線僅有ie6能識別,因此剛好在這個地方得到應用。因此也要注意把兩個加下劃線的屬性置于最后,如果是ie6就會將原背景圖屬性設為none覆蓋之前的圖片,并且啟用alphaimageloader濾鏡。另外濾鏡中的src參數,需要注意的是,你可以在這里使用相對地址,但是這個地址必須是頁面所在位置的相對地址,而不是樣式表的相對地址。
?
img標簽中的png
?
這個可以使用前面修改css的方法,網上可以搜到一段據聞是“官方解決方案”的代碼,也是使用前述濾鏡。下面是代碼:
?
Codefunction?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
?????????}
??????}
???}????
}
?
只要在頁面加載完畢之后運行這行代碼就行了,測試過沒問題。不過如果頁面動態更換了png圖片,可能要重新執行這個函數。
?轉自 http://www.cnblogs.com/zhengchuyu/archive/2008/07/30/1256890.html
?
轉載于:https://www.cnblogs.com/dsliang/archive/2009/10/19/1585927.html
總結
- 上一篇: 斩断
- 下一篇: Photoshop阴影与内阴影