css 鼠标经过图片，图片变色变暗透明
- WBOY原创
- 2016-06-01 09:53:206269浏览
1、CSS代码
<code class="language-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} </code>
这里设置了对DIV对象盒子里的超链接内图片设置hover伪类半透明效果。
2、HTML代码
<code class="language-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></code>
代码注释：
filter 设置平台IE半透明效果样式，值1-100，值越小越透明，设置IE8以前的透明使用
opacity 设置IE半透明效果样式，值0.1-1，值越小越透明，设置IE8以后版本的透明使用
-moz-opacity 对非IE浏览器设置，比如火狐，语法与IE相同。
完整实例：
<code class="language-html"><!DOCTYPE html>
<html>
<head>
<title></title>
<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></code>
在线运行
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：CSS DIV 固定宽度居中的方法下一篇：CSS div宽度自适应