http://hi1980.com/2009/03/21/img-css-filter.html
a img { |
2 |
filter:alpha(opacity=80);/*CSS透明度滤镜*/ |
3 |
opacity:0.8;/*针对Mozilla浏览器CSS透明度滤镜*/ |
4 |
} |
5 |
a:hover img { |
6 |
filter:alpha(opacity=100);/*CSS透明度滤镜*/ |
7 |
opacity:1;/*针对Mozilla浏览器CSS透明度滤镜*/ |
8 |
} |
三 21
CSS之图片滤镜
图片添加滤镜效果，就是当鼠标经过含链接的图片时触发鼠标事件令图片透明度，以达到令图片变色效果。
通常我们处理含链接的图片一般会选择使用加边鼠标经过变色来表达，但今天我想改变一下常规，使用CSS滤镜。效果如下如所示：
你可以使用鼠标经过图片看看效果 80%-100%透明度
试过之后是不是觉得比常见的边框变色要酷一些吧，通过改变图片透明度这样就足以表达了这张图片是包含了链接的。
当然如果你喜欢反过来也可以，只需为a img 也添加滤镜
你可以使用鼠标经过图片看看效果 100%-80%透明度
实现这样效果却非常简单只用了两行代码就能实现，代码如下：
1 |
a img { |
2 |
filter:alpha(opacity=80);/*CSS透明度滤镜*/ |
3 |
opacity:0.8;/*针对Mozilla浏览器CSS透明度滤镜*/ |
4 |
} |
5 |
a:hover img { |
6 |
filter:alpha(opacity=100);/*CSS透明度滤镜*/ |
7 |
opacity:1;/*针对Mozilla浏览器CSS透明度滤镜*/ |
8 |
} |