Home > Article > Web Front-end > css 鼠标经过图片,图片变色变暗透明
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" alt="css 鼠标经过图片,图片变色变暗透明" ></a></div> <div class="div2"><a href="#"><img src="images/an.gif" alt="css 鼠标经过图片,图片变色变暗透明" ></a></div></code>
代码注释:
filter 设置平台IE半透明效果样式,值1-100,值越小越透明,设置IE8以前的透明使用
opacity 设置IE半透明效果样式,值0.1-1,值越小越透明,设置IE8以后版本的透明使用
-moz-opacity 对非IE浏览器设置,比如火狐,语法与IE相同。
完整实例:
<code class="language-html"> <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> <p>css 鼠标经过图片,图片变色变暗透明</p> <div class="div1"><a href="#"><img src="/Public/images/logo.gif" alt="css 鼠标经过图片,图片变色变暗透明" ></a></div> <div class="div2"><a href="#"><img src="/Public/images/logo.gif" alt="css 鼠标经过图片,图片变色变暗透明" ></a></div> </code>
在线运行