• 思缘论坛首页
  • 论坛搜索
  • 下载记录
  • 每日签到
  • 设计软件,PS下载
  • VIP素材区预览
  • VIP素材区下载
  • 缘分币充值
发新话题
打印

[CSS教程] CSS鼠标悬停图片上图片变灰变色和半透明

CSS鼠标悬停图片上图片变灰变色和半透明

DIV+CSS鼠标移动悬停在图片上图片变色或半透明变化效果实现,CSS鼠标悬停图片上图片变灰、图片变色、图片半透明。

一、DIVCSS5介绍与说明

看到网页中的图片当鼠标移动到图片上时(鼠标悬停在图片上)图片变灰,看似变色变灰效果,实际是图片被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代码
引用:
<p>鼠标移动到图片悬停时,图片变色滤镜效果:</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>
3、效果对比截图



代码下载: MissYuan_代码.rar (69.7 KB)

教程中需要的素材请访问:优秀的PS素材和图片素材

TOP

发新话题

关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

Powered by Discuz Copyright © 2005-2019 www.MissYuan.com All rights reserved.站长QQ8713688 邮箱8713688@qq.com