1、CSS代码
.div1,.div2{ width:500px; margin:20px auto}
.div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
.div2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}
这里设置了对DIV对象盒子里的超链接内图片设置hover伪类半透明效果。
2、HTML代码
<p>css 鼠标经过图片，图片变色变暗透明</p>
<div class=\"div1\"><a href=\"#\"><img src=\"images/div-a-bg.png\" /></a></div>
<div class=\"div2\"><a href=\"#\"><img src=\"images/an.gif\" /></a></div>
代码注释：
filter 设置平台IE半透明效果样式，值1-100，值越小越透明，设置IE8以前的透明使用
opacity 设置IE半透明效果样式，值0.1-1，值越小越透明，设置IE8以后版本的透明使用
-moz-opacity 对非IE浏览器设置，比如火狐，语法与IE相同。
完整实例：
<!DOCTYPE html>
<html>
<head>
< ></ >
<style>
.div1,.div2{ width:500px; margin:20px auto}
.div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
.div2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}
</style>
</head>
<body>
<p>css 鼠标经过图片，图片变色变暗透明</p>
<div class=\"div1\"><a href=\"#\"><img src=\"/Public/images/logo.gif\" /></a></div>
<div class=\"div2\"><a href=\"#\"><img src=\"/Public/images/logo.gif\" /></a></div>
</body>
</html>
继续阅读与本文标签相同的文章
上一篇 :
寄存器基本原理介绍（上篇）
-
城市数字化后，新一代内生安全系统可全方位保护
2026-05-14栏目： 教程
-
谷歌也来“唱衰”5G，5G手机只会徒增功耗？为何这么说？
2026-05-14栏目： 教程
-
量子信息和量子技术白皮书合肥宣言在中科大发布
2026-05-14栏目： 教程
-
微信悄悄更新一新功能，来看看！
2026-05-14栏目： 教程
-
打破三大运营商垄断，第四大运营商终于来了！
2026-05-14栏目： 教程