由于个人的一些需要,想通过CSS的方式来实现鼠标滑过图片出现半透明的效果,用JavaScript来实现是比较简单的,但是这里只分享如何用CSS来实现。
CSS中有个opacity属性,可以针对透明来设置,但是它只是对FireFox、Chrome等非IE内核下好用,在IE下并不是很好用。但是CSS下还有一个不常用的属性叫做滤镜filter,这个在IE下就好用。将opacity和filter属性结合一下,就可以实现鼠标滑过出现半透明效果了。

那么对应的CSS的写法如下:

.item1 a:hover img {

opacity:0.7;
filter:alpha(opacity=70);

Tags:图片, 代码, css, 半透明