css+filter实现简单的图片透明效果
发布时间：2015-01-13 15:34:01 作者：佚名 
我要评论
我要评论本文给大家介绍的是CSS结合filter实现简单的图片透明效果的实例，主要使用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="">
以上就是本文的全部内容了，代码很简洁，实现的效果却非常好，希望对大家能所帮助。
相关文章
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实现的图片滤镜特效源码是一段可以显示出10款不同滤镜效果的代码，是一款基于css3 filter滤镜属性制作的图片美化特效，本段代码适应于所有网页使用，有需要的伙2016-12-08使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
CSS3的blur属性可以将图片加上模糊滤镜的效果,下面我们就来详细看一下使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法,需要的朋友可以参考下2016-07-08- 本节为大家介绍了CSS中filter滤镜，包括静态滤镜及动态滤镜的使用方法，不了解的朋友可以参考下2014-08-08
CSS3 滤镜 webkit-filter详细介绍及使用方法
CSS3 开始也有滤镜（不是 IE 的那种滤镜），这些滤镜效果最初是用于 SVG 的，W3C 将其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的规范，Webkit 率先支持了它,需2012-12-27- 前些天在做一个项目的时候，用到了阴影，阴影是个方向都有的，今天看到bricss说到filter:drop-shadow顿时豁然开朗，现整理了，需要的朋友可以参考下2012-12-12
Filtering Blocks JS+CSS实现的的购物产品列表
Filtering Blocks JS+CSS美化的购物产品列表，响应鼠标变色，一眼能看出，这种写法是来自一款国外的风格，具体样式请看截图，大家如有兴趣，可下载参考。2010-04-29
filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。接下来通过本文给大家介绍微信小程序 CSS filter（滤镜）的使用示例，感兴趣的朋友一起看看吧2018-07-06
最新评论