CSS鼠标悬停图片上图片变灰 变色 半透明
2017-12-06 13:27
309 查看
CSS鼠标悬停图片上图片变灰 变色 半透明
DIV CSS鼠标移动悬停在图片上图片变色或半透明变化效果实现,CSS鼠标悬停图片上图片变灰、图片变色、图片半透明
一、DIVCSS5介绍与说明: - TOP
看到网页中的图片当鼠标移动到图片上时(鼠标悬停在图片上)图片变灰,看似变色变灰效果,实际是图片被CSS设置为半透明样式。
二、关键CSS代码: - TOP
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的支持。
三、鼠标移动到图片变色,图片半透明实例 - TOP
实例案例描述:设置两个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伪类半透明效果。
相关文章推荐
- CSS鼠标悬停图片上图片变灰 变色 半透明
- CSS实现鼠标悬停图片时的边框变色效果
- 用css让头像变圆且鼠标悬停在图片上时会发光
- css实现鼠标悬停图片放大显示
- css实现鼠标悬停图片放大显示
- 表格隔行变色_CSS实现鼠标悬停高亮
- CSS鼠标悬停图片加边框效果,不位移的方法
- 鼠标经过图片时显示半透明文字,边框变色
- CSS+JavaScript打造鼠标悬停图片渐显效果!
- css鼠标悬停 图片放大
- CSS鼠标悬停菜单 图片交换技术实现
- 鼠标悬停,图片变色
- CSS实现鼠标悬停经过图片由中心点逐渐放大效果
- CSS 鼠标悬停换图片
- 鼠标滑过图片显示半透明文字,边框变色代码
- 鼠标经过图片时显示半透明文字,边框变色
- CSS鼠标悬停菜单 图片交换技术实现
- 用javascript css实现GridView行背景色交替、鼠标划过行变色,点击行变色选中
- CSS鼠标滑过变色效果
- 纯css实现背景图片半透明,内容不透明