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

本文給大家介紹的是CSS結合filter實現(xiàn)簡單的圖片透明效果的實例,主要使用filter的功能對圖片元素進行透明度控制,需要的朋友可以參考下
完成簡單的透明度控制功能
使用filter的功能對圖片元素進行透明度控制。
支持IE8,Chrome瀏覽器。
復制代碼
代碼如下:<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){
//交替設置不帶透明度和帶透明度的css
//完成鼠標移進圖片則不透明顯示,鼠標移出則帶透明度顯示
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="">
以上就是本文的全部內容了,代碼很簡潔,實現(xiàn)的效果卻非常好,希望對大家能所幫助。
相關文章
jquery和CSS3圖片排序過濾搜索插件Filterizr
Filterizr是一個jquery和CSS3圖片排序過濾插件。可對一組圖片進行排序,按條件過濾和按關鍵字搜索,歡迎下載2017-07-19- 這篇文章主要介紹了詳解CSS3中強大的filter(濾鏡)屬性的相關資料,需要的朋友可以參考下2017-06-29
詳解CSS透明opacity和IE各版本透明度濾鏡filter的最準確用法
CSS3的透明度屬性opacity想必大家都已經用的無處不在了。而對于不支持CSS3的瀏覽器如何進行透明處理,保持瀏覽器效果的一致,本篇文章主要介紹了詳解CSS透明opacity和IE各版2016-12-20- CSS3+Filter實現(xiàn)的圖片濾鏡特效源碼是一段可以顯示出10款不同濾鏡效果的代碼,是一款基于css3 filter濾鏡屬性制作的圖片美化特效,本段代碼適應于所有網頁使用,有需要的伙2016-12-08
使用CSS3濾鏡的filter:blur屬性制作毛玻璃模糊效果的方法
CSS3的blur屬性可以將圖片加上模糊濾鏡的效果,下面我們就來詳細看一下使用CSS3濾鏡的filter:blur屬性制作毛玻璃模糊效果的方法,需要的朋友可以參考下2016-07-08CSS中filter濾鏡的學習筆記(靜態(tài)濾鏡及動態(tài)濾鏡)
本節(jié)為大家介紹了CSS中filter濾鏡,包括靜態(tài)濾鏡及動態(tài)濾鏡的使用方法,不了解的朋友可以參考下2014-08-08CSS3 濾鏡 webkit-filter詳細介紹及使用方法
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)的的購物產品列表
Filtering Blocks JS+CSS美化的購物產品列表,響應鼠標變色,一眼能看出,這種寫法是來自一款國外的風格,具體樣式請看截圖,大家如有興趣,可下載參考。2010-04-29- filter 屬性定義了元素(通常是)的可視效果(例如:模糊與飽和度)。接下來通過本文給大家介紹微信小程序 CSS filter(濾鏡)的使用示例,感興趣的朋友一起看看吧2018-07-06