CSS opacity - 实现图片半透明效果的代码

2014-06-07  来源:本站原创  分类:经验交流  人气:3 

前几天一位做网页设计的朋友问我这个问题:如何通过CSS来实现图片半透明效果,并且在IE和Mozilla上都可以得到支持。下面将我的方法分享给大家。

下图为通过CSS实现的图片透明效果

这个效果在IE和Mozilla浏览器上都可以工作,代码如下

<img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50">

在IE中需要通过"filter"来定义透明度"opacity",而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果在两种浏览器中都得到支持,需要把两种设定都加进去。针对IE的设定:this.filters.alpha.opacity=50 而针对Mozilla的设定:this.style.MozOpacity=0.5. 大家可以直接用这行代码给图片定义,只须修改图片地址就能实现上图效果。

Image with link:

相关文章
  • CSS opacity - 实现图片半透明效果的代码 2014-06-07

    前几天一位做网页设计的朋友问我这个问题:如何通过CSS来实现图片半透明效果,并且在IE和Mozilla上都可以得到支持.下面将我的方法分享给大家. 下图为通过CSS实现的图片透明效果 这个效果在IE和Mozilla浏览器上都可以工作,代码如下 <img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" s

  • JavaScript 图片放大效果及代码说明 2015-03-19

    JavaScript 图片放大效果及代码说明 ,想要学习的朋友可以参考下. Magnifier select测试 是否能覆盖 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] [程序说明] 主要为magnifier类,里面的主要方法有: init:运行方法 start:则是鼠标移入div的事件处理 move:则是鼠标在div中移动的事件处理 end:鼠标移出后的事件处理 [程序介绍] 主要思维:当鼠标移入图片的时候,放大层的DIV出现,然后根据鼠标移动状况,改变放大层内图像的top值和

  • JS小功能(offsetLeft实现图片滚动效果)实例代码 2015-02-26

    这篇文章主要介绍了offsetLeft实现图片滚动效果实例代码,有需要的朋友可以参考一下 效果: 代码: <head runat="server"> <title></title> <style type="text/css"> #div1 { width: 245px; height: 150px; background: red; margin: 250px; margin-left: 500px; positio

  • 最简单的js图片切换效果实现代码 2015-02-14

    最简单的js图片切换效果实现代码,需要的朋友可以参考下. 无意中在网上发现的,代码非常的简单,一看就明白! <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4

  • 纯CSS实现的漂亮的立体图片边框效果,阴影代码 2013-11-16

    纯CSS 漂亮的立体图片边框效果,图片阴影代码,个人觉得这个挺实用,CSs实现的,定义成类,可让你整个网页上的图片都是有立体阴影的,不错吧,感谢作者分享. 图片立体边框效果 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • jquery实现多行文字图片滚动效果示例代码 2013-12-11

    多行文字图片滚动效果的实现方法有很多,本例与大家分享的是jquery实现的具体步骤,很实用的 今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find(&qu

  • CSS+Canvas实现图片灰度效果,兼容所有浏览器 2012-07-06

    昨天研究了一下利用CSS实现图片灰度效果,利用IE的滤镜和CSS3的滤镜效果可以轻松实现,但IE滤镜只支持IE家族浏览器,而CSS3的滤镜效果目前只有Google Chrome浏览器支持,那其他 Opera.Safari浏览器怎么办呢,不管他?不能做到全兼容的前端不是一个好前端,于是昨晚在网上搜了一遍,终于找到了兼容Opera.Safari浏览器的方式.实现的原理就是利用HTML5的画布功能来实现图片的灰度效果.闲话少说,先上代码: <!doctype html> <html> &

  • 多浏览器兼容的qq图片轮换效果javascript代码 2015-01-12

    今日发现qq的图片轮换效果代码不错,兼容多浏览器,测试了ie和firefox效果不错 js图片轮换效果代码_脚本之家 22吨重挖掘机 中星九号直播 考后表情 1 2 3 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 首页图片漂浮效果示例代码 2013-12-09

    图片漂浮效果想必大家都有见到过吧,一般都是通过js来实现的,下面为大家介绍的这个示例也是通过js实现的 <!--首页图片漂浮开始--> <script type="text/javascript" language="javascript"> function addEvent(obj, evtType, func, cap) { cap = cap || false; if (obj.addEventListener) { obj.addE

  • 用CSS来控制图片显示大小的代码 2014-06-22

    有时候图片太大,会破环网页整齐的布局.这时可以用css来强制按比例压缩图片的高度或宽度. img,a img{ border:0; margin:0; padding:0; max-width:590px; width:e­xpression(this.width>590?"590px":this.width); max-height:590px; height:e­xpression(this.height>590?"590px":this.heigh

  • 图片轮换效果实现代码(点击按钮停止执行) 2014-05-21

    在这个实例中需要注意的是,要把images文件夹下图片的命名设置为有顺序的,1.2.3..才可以,感兴趣的朋友可以参考下 在这个小程序中,需要把images文件夹下图片的命名设置为有顺序的,1.2.3-- <script type="text/javascript"> var imgnumb = 1; function imgfor() { imgnumb++; document.getElementById('img1').setAttribute('src', 'ima

  • jQuery+css实现图片滚动效果(附源码) 2014-07-20

    图片滚动效果想必大家都已司空见惯了吧,接下来本文介绍下jQuery+CSS实现图片滚动,感兴趣的你可不要错过了哈,希望可以帮助到你 源码下载 bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间距,默认为0. auto:是否自动滚动,默认为false. auto_interval:当设为自动滚动时,每次滚动的时间间隔(毫秒),默认为2000毫秒即2秒

  • javascript 图片放大效果函数 2014-04-08

    图片放大效果实现代码,需要的朋友可以参考下. 演示示例 1.图片和放大使用不同的图片(大小图片要比例相同) 也可以指定放大倍数(相对于小图片计算) new imageZoom("img1",{ //mul:6,//指定放大的倍数 onShow:function() { document.title="show,you are moving on the image."; }, onHide:function() { document.title="you

  • 实现点击图片切换效果 2013-07-25

    实现点击图片切换效果 Java代码 1 在资源中添加5张图片,重命名为a-e. 2 3 实现java代码如下: 4 5 6 7 8 9 10 11 packagecn.csdn.android.test; 12 13 importandroid.app.Activity; 14 importandroid.os.Bundle; 15 importandroid.view.View; 16 importandroid.view.View.OnClickListener; 17 importandr

  • 图片与文字半透明效果 鼠标移上不透明 2014-02-18

    图片与文字结合的半透明效果,在正常状态下,一张图片的上面显示文字,为了区分背景,文字下方又重新布置了一个DIV 该 DIV是半秀明状态,这样可以看到背景也可以衬托文字,当鼠标放到文字上的时候,DIV层彻底不透明,文字清淅显示出来,一般这种效果都是要配合JavaScript的,这样兼容性会更好. 图片与文字结合的半透明效果,鼠标移上不透明 脚本之家(http://www.jb51.net)提供各类编程源码.书籍教程.JavaScript/CSS特效代码等,做有质量的学习型网站. [Ctrl+A 全

  • JQery 渐变图片导航效果代码 漂亮 2014-10-24

    JQery 渐变图片导航,效果不错,非常漂亮. 图片如上..下载图片试试..效果不错哦..JS就直接连接远程就可以了 代码复用性差..希望高手指点下,应该怎么样才好 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

  • 图片翻转效果具体实现代码 2014-12-30

    想必大家对图片翻转效果都有所了解吧,其实很容易实现的,下面有个不错的示例,喜欢的朋友可以参考下 以下为程序代码: <!DOCTYPE html /> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="X-UA-Compatible" con

  • 一个简单的javascript图片放大效果代码 2014-07-15

    javascript图片放大效果多用于小图片产品的展示. 一个简单的图片放大效果: 参数说明: 1.berviary:String,需要被放大的图片id 2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div. 3.clip:object,裁剪区域的大小,即鼠标移动到需要放大的图片上时,突出显示需要被放的大区域 4.opacity:float,放大时图片被遮罩的区域的透明度 效果1: 调用的js代码: $E({ber

  • php实现给图片加灰色半透明效果的方法 2014-09-06

    这篇文章主要介绍了php实现给图片加灰色半透明效果的方法,涉及对图像的操作,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了php实现给图片加灰色半透明效果的方法.分享给大家供大家参考.具体实现方法如下: 原理: 1.首先计算出原图片的尺寸 2.创建相同尺寸的半透明图片 3.使用 imagecopy()方法,把新创建的半透明图片与原图合并 具体实现代码如下: <?php /*php 给图片加灰色透明效果*/ $imfile = './0.jpg';//原图 $origim = imagec

  • div+css布局的图片连续滚动js实现代码 2014-10-01

    整理一个div+css图片连续滚动代码,原理跟脚本之家之前发布的文章一样. html布局代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">