css+filter实现简单的图片透明效果
2015-01-13 15:34
741 查看
完成简单的透明度控制功能
使用filter的功能对图片元素进行透明度控制。
支持IE8,Chrome浏览器。
以上就是本文的全部内容了,代码很简洁,实现的效果却非常好,希望对大家能所帮助。
使用filter的功能对图片元素进行透明度控制。
支持IE8,Chrome浏览器。
<style type='text/css'> /*透明20%*/ .opacity-20 { filter:alpha(opacity=20); /*支持IE浏览器的filter*/ -webkit-filter:opacity(0.2); /*支持chrome浏览器filter*/ } /*不透明*/ .opacity-100 { filter:alpha(opacity=100); -webkit-filter:opacity(1); } </style> <script language="javascript"> function makevisible(cur,which){ //交替设置不带透明度和带透明度的css //完成鼠标移进图片则不透明显示,鼠标移出则带透明度显示 if (which==0) { cur.className = 'opacity-100'; }else{ cur.className = 'opacity-20'; } } </script> <img src="final.bmp" border=1 onMouseOver="makevisible(this,0)" onMouseOut="makevisible(this,1)" alt="">
以上就是本文的全部内容了,代码很简洁,实现的效果却非常好,希望对大家能所帮助。
相关文章推荐
- web前端学习笔记---利用css+filter完成简单的图片透明效果
- CSS Filter 代替 图片 实现 渐变背景效果。
- jquery+css实现简单的图片轮播效果
- jq + css 实现简单的图片轮播效果
- html+css+js简单实现图片轮播效果
- 【前端】CSS实现背景图片透明和文字不透明效果
- 使用CSS实现图片分割效果的简单方法介绍
- CSS实现PNG图片背景透明效果
- CSS实现简单的图片防盗链代码
- 一种简单的方法在程序中实现透明效果(JAVA)(源代码)
- 用css实现链接经过时显示浮动图片背景的效果
- 简单实用的无图片随意变色css圆角效果!
- 分享用CSS实现无图片圆角效果
- 如何在CSS中实现图片交替效果
- css实现图片选中效果,选中后在图片上有内框和文字介绍
- CSS简单实现网页悬浮效果(对联广告)
- CSS实现图片像框阴影效果
- CSS实现简单的图文互绕排版效果
- Js实现图片透明效果
- 用css filter做鼠标滑过图片效果