怎样用CSS让鼠标悬停在图片上图片变灰

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年10月4日02:22:47 评论 19 views 985字阅读3分17秒

我们常常在网页中看到这样一种效果,当你的鼠标移动到图片上的时候,图片变灰,或者变暗,这实际是图片被CSS设置为半透明样式。下面就给大家做一个实例看一下这种效果怎么实现

a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}

此CSS代码作用,设置鼠标移动到A超链接时,超链接内图片(img)呈现半透明显示80%效果。

解释:

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

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

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

此设置CSS样式opacity、filter在IE6中不支持,因为现在IE6版本占有急剧下滑,所以一般不考虑IE6对此CSS的支持。

鼠标移动到图片变色,图片半透明实例

实例案例描述:设置两个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教程其它相关文章!

相关阅读:

原生js的常用方法整理

用Vue+CSS3怎么做交互特效

详解前端响应式布局、响应式图片,与自制栅格系统

以上就是怎样用CSS让鼠标悬停在图片上图片变灰的详细内容,更多请关注css教程其它相关文章!

继续阅读
怎样用css操作链接样式 css教程

怎样用css操作链接样式

这篇文章将详细的讲解通过css来控制超链接样式。我们主要讲文字类型的超链接,包括超链接有无下划线、超链接文字颜色等样式。 什么是超链接? 超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是...
CSS中页面引用(详解) css教程

CSS中页面引用(详解)

本章给大家介绍CSS的页面引用。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 css 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是...
详解CSS绘制三角形箭头图案技术解析 css教程

详解CSS绘制三角形箭头图案技术解析

最近我想修改一下这个网站,我想在上面放置一个提示框。这是很容易,但我想让提示框上有一个三角形的箭头。可是,一想到这需要使用图片,并且各种颜色,各种方向的箭头要准备无数种,这几乎是一种灾难。幸运的是,M...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: