网站建设知识之实现鼠标移开图片变暗

网站建设知识之实现鼠标移开图片变暗,方法一利用css样式：

样式代码：
div{
float: left;
width: 180px;
height: 180px;
margin: 0auto;
background: url(580plan.jpg) centercenterno-repeat;
z-index: 1;
}
a{
filter: alpha(opacity=80);
opacity: 0.8;
width: 180px;
height: 180px;
display: block;
background: #333;
z-index: 100;
}
a:hover{
filter: alpha(opacity=0);
opacity: 0;
}
网页调取：

<div><a href="#"></a></div>

方法二：js效果
Js代码：

网页调取：

<img id="imgInfo" src=" http://www.xinyisheji.net/" style="filter: alpha

(opacity=90);" onmouseover="opacity_change(0)" onmouseout="opacity_change

(1)"/>

两种方式都各有优缺，我们只测试了几个浏览器，大家可以多测试几个浏览器的兼容。