怎样用CSS使鼠标悬停在图片使图片变灰
发布时间：2022-06-09 04:46:24 所属栏目：建站 来源：互联网
导读：我们常常在网页中看到这样一种效果，当你的鼠标移动到图片上的时候，图片变灰，或者变暗，这实际是图片被CSS设置为半透明样式。下面就给大家做一个实例看一下这种效果怎么实现 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;} 此CS
|
我们常常在网页中看到这样一种效果，当你的鼠标移动到图片上的时候，图片变灰，或者变暗，这实际是图片被CSS设置为半透明样式。下面就给大家做一个实例看一下这种效果怎么实现 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;} 此CSS代码作用，设置鼠标移动到A超链接时，超链接内图片（img）呈现半透明显示80%效果。 实例案例描述：设置两个DIV盒子，两个盒子分别放入一张图，通过对其设置鼠标悬停(:hover)时图片半透明为80%和70%，观察其效果。 1、关键CSS代码 .p1,.p2{ width:500px; margin:20px auto} .p1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8} .p2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7} 这里设置了对DIV对象盒子里的超链接内图片设置hover伪类半透明效果。 2、关键HTML代码 <p>鼠标移动到图片悬停时，图片变色滤镜效果：</p> <p class="p1"><a href="#"><img src="images/p-a-bg.png" /></a></p> <p class="p2"><a href="#"><img src="images/an.gif" /></a></p> 相信看了这些案例你已经掌握了方法，更多精彩请关注css教程其它相关文章！ 详解前端响应式布局、响应式图片，与自制栅格系统。 （编辑：PHP编程网 - 湛江站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐