解析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;*/的注释看看。
解析IE, FireFox, Opera 浏览器支持Alpha透明的方法的更多相关文章
- IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题
一:要解决的问题时:在ie6-ie11下兼容下面透明上传文件button的效果. 实现方式通过滤镜实现. 二:效果图例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3N ...
- IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
这个世界变化很快,IE8也快出来了,它将不在支持以前{filter:alpha(opacity=50);}的私有属性,转而支持更规范的私有属性-ms-filter: “progid:DXImageTr ...
- 解决Firefox/Opera 不支持onselectstart事件实现不允许用户select
在IE/Safari/Chrome中我们可以使用onselectstart事件来阻止用户选定元素内文本,本文为大家解决下火狐中如何实现不能选择,由此需求的朋友可以参考下,希望对大家有所帮助 ...
- [置顶] 解决Firefox/Opera 不支持 onselectstart事件
在开发中,很多区域是不允许用户select的,在IE/Safari/Chrome中我们可以使用onselectstart事件来阻止用户选定元素内文本, 但在火狐中,这段区域还是可以选择的, 如下: & ...
- png24是支持Alpha透明的。。。。。。
这个可能跟每个人使用切图软件有关. 1.Photoshop 1)只能导出布尔透明(全透明或者全不透明)的PNG8. 2)能导出alpha透明(全透明,全不透明,半透明)的PNG24. ...
- 让IE浏览器支持CSS3圆角的方法
如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式.今天我们主要是讲解如果用CSS3样式表来实现圆角效果,值得 ...
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
- Chrome(谷歌浏览器)和Firefox浏览器flash的swf文件发黑不透明问题解决方法
一直以来看到各大网站的FLASH都是黑框框的,很好奇,难道他们不知道flash是可以设成透明的?于是用IE Tab插件浏览了下,发现人家的网页又正常,这样一来我就开始怀疑是我的Chrome有问题,于是 ...
- 【IE6的疯狂之二】IE6中PNG Alpha透明(全集)
ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明. 很多人说IE6不支持PNG透明,其实IE支持100%透明的PNG ...
随机推荐
- js 实现图片的无缝滚动
js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...
- potplayer 网页调用potplayer播放本地视频
网页调用potplayer播放本地视频 CreateTime--2018年1月3日10:36:24 Author:Marydon 源码展示: <!DOCTYPE html> <h ...
- windows下安装redis及其客户端
首先下载redis安装包:https://github.com/MSOpenTech/redis/releases 解压安装包到相应文件夹,任何盘符都行. 文件介绍:redis-server.exe: ...
- LaTeX去掉默认显示日期时间
LaTeX去掉默认显示日期时间: \date{}
- ztree获取选中节点
$(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); functi ...
- shell中的find和xargs详细解析
- Ubuntu 14.04主机上部署k8s集群
部署结构 3台虚拟机,其中1台作为master,2台作为minion,都安装了最新版本的docker engine(目前是1.11.2) k8s版本是1.3.0 主要问题 部署步骤基本按照官方文档:h ...
- atitit.Oracle 9 10 11 12新特性attilax总结
atitit.Oracle 9 10 11 12新特性 1. ORACLE 11G新特性 1 1.1. oracle11G新特性 1 1.2. 审计 1 1.3. 1. 审计简介 1 1.4. ...
- atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js
atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js 1. 图片按钮的效果总结 1 1.1. 按钮图片自动缩放的. 1 1.2. 不要 ...
- vue项目中,main.js,App.vue,index.html如何调用
1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App. ...