1.样式说明:
当鼠标滑过或者悬停在图片上时,图片颜色变灰,看似是图片变灰变色效果,实际上是图片被设置为半透明样式
2.CSS样式代码:
(1)HTML代码:
<div class="sasa-layout" >
<a href="selectType.html">
<div class="sasa-iframe">
<div class="sasa-img">
<img src="../resource/images/22222.png" />
</div>
<span>业务流程</span>
</div>
</a>
</div >
(2)css样式代码:
.sasa-layout a{
float: left; list-style: none;text-decoration: none;color: black;font-family: "微软雅黑";font-size: 24px;
}
.sasa-layout a:hover{
color: #0000FF;
}
.sasa-layout a:hover img{
filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;
}
注意:
filter 设置IE半透明效果,值1-100,值越小越透明,设置IE8以前的版本使用
opacity 设置IE半透明效果,值0.1-1,值越小越透明,设置IE8以后的版本使用
-moz-opacity 对非IE浏览器设置,比如火狐,语法与IE相同
-wekit-opacity 谷歌浏览器使用等,内核不同的浏览器,写法大致不同
(3)效果对比: