css+filter實現(xiàn)簡單的圖片透明效果
發(fā)布時間：2015-01-13 15:34:01 作者：佚名 
我要評論
我要評論本文給大家介紹的是CSS結(jié)合filter實現(xiàn)簡單的圖片透明效果的實例，主要使用filter的功能對圖片元素進(jìn)行透明度控制,需要的朋友可以參考下
完成簡單的透明度控制功能
使用filter的功能對圖片元素進(jìn)行透明度控制。
支持IE8，Chrome瀏覽器。
復(fù)制代碼
代碼如下:<style type='text/css'>
/*透明20%*/
.opacity-20 {
filter:alpha(opacity=20); /*支持IE瀏覽器的filter*/
-webkit-filter:opacity(0.2); /*支持chrome瀏覽器filter*/
}
/*不透明*/
.opacity-100 {
filter:alpha(opacity=100);
-webkit-filter:opacity(1);
}
</style>
<script language="javascript">
function makevisible(cur,which){
//交替設(shè)置不帶透明度和帶透明度的css
//完成鼠標(biāo)移進(jìn)圖片則不透明顯示，鼠標(biāo)移出則帶透明度顯示
if (which==0) {
cur.className = 'opacity-100';
}else{
cur.className = 'opacity-20';
}
}
</script>
<img src="final.bmp" border=1 onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)" alt="">
以上就是本文的全部內(nèi)容了，代碼很簡潔，實現(xiàn)的效果卻非常好，希望對大家能所幫助。
相關(guān)文章
jquery和CSS3圖片排序過濾搜索插件Filterizr
Filterizr是一個jquery和CSS3圖片排序過濾插件?？蓪σ唤M圖片進(jìn)行排序，按條件過濾和按關(guān)鍵字搜索，歡迎下載2017-07-19
這篇文章主要介紹了詳解CSS3中強(qiáng)大的filter(濾鏡)屬性的相關(guān)資料,需要的朋友可以參考下2017-06-29詳解CSS透明opacity和IE各版本透明度濾鏡filter的最準(zhǔn)確用法
CSS3的透明度屬性opacity想必大家都已經(jīng)用的無處不在了。而對于不支持CSS3的瀏覽器如何進(jìn)行透明處理，保持瀏覽器效果的一致,本篇文章主要介紹了詳解CSS透明opacity和IE各版2016-12-20
CSS3+Filter實現(xiàn)的圖片濾鏡特效源碼是一段可以顯示出10款不同濾鏡效果的代碼，是一款基于css3 filter濾鏡屬性制作的圖片美化特效，本段代碼適應(yīng)于所有網(wǎng)頁使用，有需要的伙2016-12-08使用CSS3濾鏡的filter:blur屬性制作毛玻璃模糊效果的方法
CSS3的blur屬性可以將圖片加上模糊濾鏡的效果,下面我們就來詳細(xì)看一下使用CSS3濾鏡的filter:blur屬性制作毛玻璃模糊效果的方法,需要的朋友可以參考下2016-07-08CSS中filter濾鏡的學(xué)習(xí)筆記(靜態(tài)濾鏡及動態(tài)濾鏡)
本節(jié)為大家介紹了CSS中filter濾鏡，包括靜態(tài)濾鏡及動態(tài)濾鏡的使用方法，不了解的朋友可以參考下2014-08-08CSS3 濾鏡 webkit-filter詳細(xì)介紹及使用方法
CSS3 開始也有濾鏡（不是 IE 的那種濾鏡），這些濾鏡效果最初是用于 SVG 的，W3C 將其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的規(guī)范，Webkit 率先支持了它,需2012-12-27- 前些天在做一個項目的時候，用到了陰影，陰影是個方向都有的，今天看到bricss說到filter:drop-shadow頓時豁然開朗，現(xiàn)整理了，需要的朋友可以參考下2012-12-12
Filtering Blocks JS+CSS實現(xiàn)的的購物產(chǎn)品列表
Filtering Blocks JS+CSS美化的購物產(chǎn)品列表，響應(yīng)鼠標(biāo)變色，一眼能看出，這種寫法是來自一款國外的風(fēng)格，具體樣式請看截圖，大家如有興趣，可下載參考。2010-04-29
filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。接下來通過本文給大家介紹微信小程序 CSS filter（濾鏡）的使用示例，感興趣的朋友一起看看吧2018-07-06
