解析IE, FireFox, Opera 浏览器支持Alpha透明的方法

先请看如下代码：


代码如下:

filter:alpha(opacity=50);       /* IE */ 
-moz-opacity:0.5;              /* Moz + FF */ 
opacity: 0.5;           /* 支持CSS3的浏览器（FF 1.5也支持）*/

简单解释，IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数（alpha(opacity)）使用大于0小于100的数值，其实也是百分比）。

从上面的代码中你没有看到Opera。没错，Opera还未支持标准的opacity，也没有其私有的可支持Alpha透明的属性。

但是，我们知道，Opera是支持Alpha透明的PNG图片的（当然Moz Family也支持）。所以我们可以使用背景图片来实现Alpha透明效果。

例子：http://realazy.org/lab/alpha/

关键在于：


代码如下:

background: transparent url(alpha80.png) left top repeat!important; 
background: #ccc; 
filter:alpha(opacity=50); 
既然Moz Family支持Alpha透明的PNG，所以我们没有必要使用其私有属性了。当然，你可以使用标准的opacity，但别同时使用Alpha透明图片和opacity，这样的话就成了两者的混合了。你可以把上面的例子下载过来，然后/*opacity: .5;*/的注释看看。

赞 (0)

相关推荐

  • 解析IE, FireFox, Opera 浏览器支持Alpha透明的方法

    先请看如下代码: 复制代码 代码如下: filter:alpha(opacity=50);       /* IE */  -moz-opacity:0.5;              /* Moz + FF */  opacity: 0.5;           /* 支持CSS3的浏览器(FF 1.5也支持)*/ 简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz 

  • 让IE ff Opera同时支持Alpha透明的方法

    我们今天共同学习一下CSS Alpha透明相关的知识. 关于CSS Alpha透明的相关知识.先请看如下代码: 复制代码 代码如下: filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* Moz + FF */ opacity: 0.5; /* 支持CSS3的浏览器(FF 1.5也支持)*/ 简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opa

  • 利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)

    现在的浏览器大概有好几种,各个人的喜好也不同,所以也就用着不同的浏览器!我们开发的人来说经常要加个判断,要不可能某些功能没法正常使用.要是没加个判断就会给大家带来些麻烦!虽然可能大家的喜好不同!用的系统也不同!有人喜欢用ie, firefox,还有人喜欢用腾讯tt,maxthon等等.虽然名字可能有很多种,但是内核我们知道下就没问题了.如IE内核的:IE,maxthon,tt都是.当然还有netscape内核!看大家怎么去判断! 由于在开发时碰上这个问题.于是找了下资料和自己总结如下JS代码:

  • jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox

    jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果在ie,firefox和测试一切正常,建议以后大家都要用这样的兼容性比较好的代码 body {margin:0 auto; padding:0; text-align:center } .box400 {margin:0 auto;padding:0;width:400px} #f_menu { MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 400px; HEIGHT: 20px } #f_men

  • Base64(二进制)图片编码解析及在各种浏览器的兼容性处理

    Base64(二进制)图片编码解析及在各种浏览器的兼容性处理

    IE浏览器目前最高的版本是v11,而微软放弃了IE,转向新的浏览器开发,并取名为Edge.base64图片在IE9及以后的图片均能显示没有问题,而Firefox, Chrome, Safari等非IE浏览器都能正常显示,所以显得IE浏览器比较low.那么兼容性究竟应该怎么来处理呢? 分三种情况. (1)IE9+.Firefox.Chrome.Safari等浏览器 base64图片在HTML里的标准写法是: <img src="data:image/jpeg;base64,/9j/4AAQS

  • Ajax请求过程中下载文件在FireFox(火狐)浏览器下的兼容问题

    需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片ping) 的跨域能力,将它们的 src 属性指向统计地址,但是这次用了 ajax 进行统计,遂出现了这个问题. demo 代码如下: <a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.0.2 x64 Setup.exe&q

  • 页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)

    页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)

    1.页面缩放用到的技术点 (1)zoom zoom:normal | <number> | <percentage> 默认值:normal 适用于:所有元素 继承性:有 可以使用用浮点数和百分比来定义缩放比例. zoom的浏览器兼容性:http://caniuse.com/#search=zoom zoom的兼容性:firefox 全系列不支持. (2)transform transform:scale(1.1,1.1); scale(x,y) 定义 2D 缩放转换. 兼容性:ht

  • js监听表单value的修改同步问题，跨浏览器支持

    js监听表单value的修改同步问题，跨浏览器支持

    想要实现的功能大概是这样的: 有两个文本框,其中一个只读,另一个可以输入.要求在可输入文本框中输入文本时,只读文本框能够获得输入的值,且只读文本框旁边出现提示信息,实时显示只读文本框的内容. 这个功能看是简单,但其实并没有想象的那么简单.(注意,可输入框的处理没什么可讨论的,关键是只读框的处理) 一开始,我们一般会想到在只读文本框上运用onchange事件.一试,发现onchange根本没用,该事件是在文本框获得焦点,然后内容改变失去焦点后才触发的,现在在只读文本框上根本没有这些,它的内容是通过

  • 让firefox支持IE的一些方法的javascript扩展函数代码

    这一段使得FireFox也支持IE的innerText方法 复制代码 代码如下: function isIE(){ if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1) return true; else return false; } if(!isIE()){ //firefox innerText define HTMLElement.prototype.__defineGetter__( "

  • 解决 firefox 不支持 document.all的方法

    今天为Kinoko-World写v2版,遇到了点js的小问题.document.all在firefox下不支持,上网搜索了一下, 用 document.getElementsByTagName("*") 替代就OK了. getElementsByTagName("*") 可以得到得到所有元素的集合 getElemntById 可以按id得到某一元素 getElementsByName 可以得到按name属性得到某一元素 getElementById效果更好啊

随机推荐