生活随笔
收集整理的這篇文章主要介紹了
CSS opacity - 实现图片半透明效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
| 在CSS中有一個Alpha濾鏡,這個濾鏡可以設(shè)置目標(biāo)元素的透明度。還可以通過指定坐標(biāo),從而實現(xiàn)各種不同范圍的透明度。具體語法如下: {filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}
具體參數(shù)含義如下: opacity 透明度。默認(rèn)的范圍是從0 到 100,他們其實是百分比的形式。也就是說,0代表完全透明,100代表完全不透明。 finishopacity 是一個可選參數(shù),如果想要設(shè)置漸變的透明效果,就可以使用他們來指定結(jié)束時的透明度。范圍也是0 到 100。 style?? 指定透明區(qū)域的形狀特征:0 代表統(tǒng)一形狀,1 代表線形,2 代表放射狀,3 代表矩形 startx?? 漸變透明效果開始處的 X坐標(biāo)。 starty?? 漸變透明效果開始處的 Y坐標(biāo)。 finishx 漸變透明效果結(jié)束處的 X坐標(biāo)。 finishy 漸變透明效果結(jié)束處的 Y坐標(biāo)。
以上的參數(shù)可以選用,可以只設(shè)置一個opacity 例如: {filter:alpha(opacity=50)} 這個就是半透明的設(shè)置,只要把{}中的代碼加入到需要設(shè)置的模版中的{}的即可,記得與前面的代碼之間要用";"間隔,不然設(shè)置是無效的
例如: 我要設(shè)置模版區(qū)域背景的顏色(白色)+半透明 只要在 .modbox{} .modbl{} .modbc{} .modbr{} 中都設(shè)置background-color:white 這些就是模版背景設(shè)置的ID
然后再在.modbox,.modbl,.modbc,.modbr{}如果沒有這個的話可以自己加一個 中加入filter : alpha(opacity=80)就可以達(dá)到所有模版的背景都是半透明的效果了
如果希望像我這樣只顯示blog的背景,別的都全透明的話,那么就在別的模版中加入背景全透明的代碼即可 background:transparent?????????????????????? 這就是背景全透明的代碼
不過這樣的話,相關(guān)模版的主要區(qū)域是透明了,可是底下還會有一條顏色留著的,所以另外還要在 .modbl{} .modbc{} .modbr{} 中也加入背景全透明的代碼,這樣才能讓模版區(qū)域完全透明,就像我現(xiàn)在的效果一樣
另外這個參數(shù)目前只能用于背景色的設(shè)置,背景圖片也可以設(shè)置為半透明
我把我的背景半透明代碼貼出來吧 .modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533} .modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px} .modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px} .modbr{background:transparent;;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px} .modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}
? 這個效果在IE和Mozilla瀏覽器上都可以工作,代碼如下
<img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" οnmοuseοver="this.style.MozOpacity=1; this.filters.alpha.opacity=100" οnmοuseοut="this.style.MozOpacity=0.5; this.filters.alpha.opacity=50"> ? 在IE中需要通過"filter"來定義透明度"opacity",而在Mozilla中是可以直接解析"opacity",所以如果要使得這個效果在兩種瀏覽器中都得到支持,需要把兩種設(shè)定都加進去。針對IE的設(shè)定:this.filters.alpha.opacity=50 而針對Mozilla的設(shè)定:this.style.MozOpacity=0.5. 大家可以直接用這行代碼給圖片定義,只須修改圖片地址就能實現(xiàn)上圖效果。 |
總結(jié)
以上是生活随笔為你收集整理的CSS opacity - 实现图片半透明效果的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯,歡迎將生活随笔推薦給好友。