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

前几天一位做网页设计的朋友问我这个问题：如何通过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:

赞 (0)

相关推荐

  • Opacity.js

    复制代码 代码如下: //---------------------------------------------------------------  // Opacity Displayer, Version 1.0  // Copyright Michael Lovitt, 6/2002.  // Distribute freely, but please leave this notice intact.  //-------------------------------------

  • 原生js实现半透明遮罩层效果具体代码

    复制代码 代码如下: <!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"> <head> <meta http-equiv=&qu

  • Cross-Browser Variable Opacity with PNG

    Periodically, someone tells me about the magic of PNG, how it's the ideal image format for the web, and that someday we'll all be using it on our sites instead of GIF. People have been saying this for years, and by now most of us have stopped listeni

  • IE6下opacity与JQuery的奇妙结合

    复制代码 代码如下: <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">&l

  • js和jQuery设置Opacity半透明 兼容IE6

    1.css设置透明度 透明度在IE浏览器和其他相关浏览器中的设置方法是不一样的,IE使用滤镜filter的alpha属性,firefox和其它浏览器不支持滤镜,它们使用opactiy属性设置透明度,下面示例设置透明度为30%: IE:filter: alpha(opacity:30): firefox:opacity(0.3): 2.使用js设置透明度 为了兼容IE与其他浏览器对透明度的设置,我们需要对以上两种样式分别进行设置.下面是一段示例代码: 复制代码 代码如下: var alpha =

  • 纯JS半透明Tip效果代码

    Test function opacity(id, opacStart, opacEnd, millisec) { //speed for each frame var speed = Math.round(millisec / 100); var timer = 0; //determine the direction for the blending, if start and end are the same nothing happens if(opacStart > opacEnd)

  • js+CSS实现弹出居中背景半透明div层的方法

    本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

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

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

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

  • js鼠标点击图片切换效果实现代码

    js鼠标点击图片切换效果实现代码

    本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:

  • JavaScript基于SVG的图片切换效果实例代码

    JavaScript基于SVG的图片切换效果实例代码

    最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解到没. -_-!!! 图片轮播见的太多,今天就用 SVG 写了一个图片轮播,效果如下. 效果要求 点击控制块,图片切换.切换的时候使用圆形做遮罩,由小到大变化.每次切换的时候,圆的位置随机产生. 主要知识点 1. SVG 的裁切(遮罩),clip-path 的运用. 2. SVG 利用 JS 更改层

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

    JS小功能(offsetLeft实现图片滚动效果)实例代码

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 245px;            height: 150px;            background: red;            margin: 250p

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

    多浏览器兼容的qq图片轮换效果javascript代码

    js图片轮换效果代码_我们 22吨重挖掘机 中星九号直播 考后表情 1 2 3 function $(v){return document.getElementById(v)} var img = $("bimg").getElementsByTagName("div"); var td = $("simg").getElementsByTagName("td"); var text = $("info")

  • JavaScript 图片放大效果及代码说明

    JavaScript 图片放大效果及代码说明

    Magnifier #magnifier{ width:342px; height:420px; position:absolute; top:100px; left:250px; font-size:0; border:1px solid #000; } #img{ width:342px; height:420px; } #Browser{ border:1px solid #000; z-index:100; position:absolute; background:#555; } #m

  • 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("li:first").height(), line=opt.line?pars

  • Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码第1/3页

    类似于浏览器窗口一样的路由切换逻辑,看着还是挺高大上的,本以为有很多高级的玩意儿,奈何复杂的东西总是由简单的东西拼接而成的,这个功能也不例外. 本篇文章主要描述两个问题: 如何实现这种Tab标签页的路由效果 如何为路由切换添加转场动画. 该功能的开发主要使用到 AntDesignVue 组件库的Tab组件和 Animate.css 效果如下: Tab标签页实现 首先是该组件的模板部分, ContextMenu 组件是我们自定义的右键菜单,后面会说到. a-tabs 组件则是 ant 的组件,具体

  • 首页图片漂浮效果示例代码

    复制代码 代码如下: <!--首页图片漂浮开始--> <script type="text/javascript" language="javascript"> function addEvent(obj, evtType, func, cap) { cap = cap || false; if (obj.addEventListener) { obj.addEventListener(evtType, func, cap); return

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

    在这个小程序中,需要把images文件夹下图片的命名设置为有顺序的,1.2.3-- 复制代码 代码如下: <script type="text/javascript"> var imgnumb = 1; function imgfor() { imgnumb++; document.getElementById('img1').setAttribute('src', 'images/' + imgnumb + '.jpg'); if (imgnumb == 5) { //共

随机推荐