css+filter實(shí)現(xiàn)簡單的圖片透明效果
發(fā)布時(shí)間:2015-01-13 15:34:01 作者:佚名
我要評(píng)論

本文給大家介紹的是CSS結(jié)合filter實(shí)現(xiàn)簡單的圖片透明效果的實(shí)例,主要使用filter的功能對(duì)圖片元素進(jìn)行透明度控制,需要的朋友可以參考下
完成簡單的透明度控制功能
使用filter的功能對(duì)圖片元素進(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)容了,代碼很簡潔,實(shí)現(xiàn)的效果卻非常好,希望對(duì)大家能所幫助。
相關(guān)文章
jquery和CSS3圖片排序過濾搜索插件Filterizr
Filterizr是一個(gè)jquery和CSS3圖片排序過濾插件??蓪?duì)一組圖片進(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)用的無處不在了。而對(duì)于不支持CSS3的瀏覽器如何進(jìn)行透明處理,保持瀏覽器效果的一致,本篇文章主要介紹了詳解CSS透明opacity和IE各版2016-12-20CSS3+Filter實(shí)現(xiàn)的圖片濾鏡特效源碼
CSS3+Filter實(shí)現(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)濾鏡及動(dòng)態(tài)濾鏡)
本節(jié)為大家介紹了CSS中filter濾鏡,包括靜態(tài)濾鏡及動(dòng)態(tài)濾鏡的使用方法,不了解的朋友可以參考下2014-08-08CSS3 濾鏡 webkit-filter詳細(xì)介紹及使用方法
CSS3 開始也有濾鏡(不是 IE 的那種濾鏡),這些濾鏡效果最初是用于 SVG 的,W3C 將其引入到 CSS3 中,然后制定了 CSS Filter Effects 1.0 的規(guī)范,Webkit 率先支持了它,需2012-12-27- 前些天在做一個(gè)項(xiàng)目的時(shí)候,用到了陰影,陰影是個(gè)方向都有的,今天看到bricss說到filter:drop-shadow頓時(shí)豁然開朗,現(xiàn)整理了,需要的朋友可以參考下2012-12-12
Filtering Blocks JS+CSS實(shí)現(xiàn)的的購物產(chǎn)品列表
Filtering Blocks JS+CSS美化的購物產(chǎn)品列表,響應(yīng)鼠標(biāo)變色,一眼能看出,這種寫法是來自一款國外的風(fēng)格,具體樣式請(qǐng)看截圖,大家如有興趣,可下載參考。2010-04-29- filter 屬性定義了元素(通常是)的可視效果(例如:模糊與飽和度)。接下來通過本文給大家介紹微信小程序 CSS filter(濾鏡)的使用示例,感興趣的朋友一起看看吧2018-07-06