当前位置:Gxlcms > html代码 > css鼠标经过图片,图片变色变暗透明

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

时间:2021-07-01 10:21:17 帮助过:9人阅读

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

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

 
 

代码注释:

filter 设置平台IE半透明效果样式,值1-100,值越小越透明,设置IE8以前的透明使用

opacity 设置IE半透明效果样式,值0.1-1,值越小越透明,设置IE8以后版本的透明使用

-moz-opacity 对非IE浏览器设置,比如火狐,语法与IE相同。

完整实例:

 
 
 
 

 
 

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

 
 

在线运行

人气教程排行