css 鼠标经过图片，图片变色变暗透明

更新2021-08-08

也想出现在这里？联系我们吧

1、CSS代码.div1,.div2{ width:500px; margin:20px auto}.div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0

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> 
<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>

在线运行

特别声明：以上内容(如有图片或视频亦包括在内)为本平台用户上传并发布，本平台仅提供信息存储服务。举报