让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，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数（alpha(opacity)）使用大于0小于100的数值，其实也是百分比）。

　　从上面的代码中你没有看到Opera。没错，Opera还未支持标准的opacity，也没有其私有的可支持Alpha透明的属性。
　　但是，我们知道，Opera是支持Alpha透明的PNG图片的（当然Moz Family也支持）。所以我们可以使用背景图片来实现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 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

  • 解析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 

  • iOS中设置父视图透明但内容不透明的方法

    前言 本文就来给大家讲解一下在iOS中如何将父试图设置为透明而其里面的内容不透明的方法,分享出来供大家参考学习,下面来一起看看详细的介绍. 方法如下: 错误的做法 self.view.backgroundColor = [UIColor clearColor]; self.view.alpha = 0.5; 这样写虽然可以达到透明的效果,往往也会造成添加改self.view视图上面的所有子视图的会产生透明,然而这往往是我们不需要的. 正确的做法 self.view.backgroundColor

  • Android编程实现设置按钮背景透明与半透明及图片背景透明的方法

    本文实例讲述了Android编程实现设置按钮背景透明与半透明及图片背景透明的方法.分享给大家供大家参考,具体如下: Button或者ImageButton的背景设为透明或者半透明: 半透明 复制代码 代码如下: <Button android:background="#e0000000" ... /> 透明 复制代码 代码如下: <Button android:background="#00000000" ... /> 颜色和不透明度 (al

  • Android编程实现图片透明的方法

    Android编程实现图片透明的方法

    本文实例讲述了Android编程实现图片透明的方法.分享给大家供大家参考,具体如下: 今天弄了一个图片的透明方法. 效果图: 目录结构 main.xml <?xml version="1.0" encoding="utf-8" ?> <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android" android:orientation="

  • VBScript提交表单提示-对象不支持此属性或方法

    今天因需要客户端得用VBScript对表单进行处理.提交,然而在提交表单时老是出错,错误信息为:"对象不支持此属性或方法".后查资料得知: 引用内容 除了表单提交按钮,页面中不允许再有一个表单项名字为submit 改下名字,果然没问题了,汗. 以前用Javascript都没碰过这样的问题:Dreamweaver插入按钮时名字默认的都是Submit[n],以后用VBScript得注意改名!

  • 让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__( "

  • 对象不支持此属性或方法: Session.CodePage = 936 解决方法

    今天调试网站时在后台出现这样的错误,"Microsoft VBScript 运行时错误 '800a01b6' 对象不支持此属性或方法: 'Session.CodePage'" 在百度搜索查看到的答案又不是很全,大多都是含糊不清的.后来我自己研究了一下,原来还有个比较快的方法! 如果你出现以下信息: Microsoft VBScript 运行时错误 '800a01b6' 对象不支持此属性或方法: 'Session.CodePage' \include\sysCode.asp, line

  • JS实现设置ff与ie元素绝对位置的方法

    本文实例讲述了JS实现设置ff与ie元素绝对位置的方法.分享给大家供大家参考,具体如下: function Show_menu(liid,divid) { var li=document.getElementById(liid); var div=document.getElementById(divid); div.style.left=getLeft(li)+140+'px'; div.style.top= getTop(li)+'px'; var tt=div.style.top; div

  • JQuery.validate在ie8下不支持的快速解决方法

    一.在ie8下回有问题的代码 1.JQuery.validate验证框架是通过页面form表单提交验证<input/>标签中输入是否符合自己的规则的 <form id="cardTypeFrm"> <table width="100%" cellspacing="0" cellpadding="0" class="table_pzh"> <tbody> <

随机推荐