HTML如何实现鼠标移动悬停在图片上图片变色或半透明效果

本篇内容介绍了“HTML如何实现鼠标移动悬停在图片上图片变色或半透明效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联公司是专业的托克逊网站建设公司,托克逊接单;提供成都网站设计、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行托克逊网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

一、CSS5先容与说明:

看到网页中的图片当鼠标挪动到图片上时(鼠标悬停在图片上)图片变灰,看似变色变灰成就,现实是图片被CSS设置装备摆设为半透明花色。

二、要害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代码

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

鼠标移动到图片悬停时,图片变色滤镜造诣:

“HTML如何实现鼠标移动悬停在图片上图片变色或半透明效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


本文名称:HTML如何实现鼠标移动悬停在图片上图片变色或半透明效果
当前地址:http://pwwzsj.com/article/gijies.html

其他资讯