opacity兼容性问题
用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持。
不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari:
IE: filter:alpha(opacity)
Mozilla: -moz-opacity
Safari: -khtml-opacity
很不幸的是,你没看见Opera,老版本的Opera并没有什么私有属性可以代替opacity。(新版Opera已经支持opacity)
所以以前用CSS设定一个元素半透明的话,可能会这样写:
.opacity{
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity: 0.5; /* 支持opacity的浏览器*/
}
用javascript来设定一个元素为半透明:
.object.filter = "alpha(opacity=" + opacity + ")"; /**//* IE */
.object.MozOpacity = (opacity / ); /**//* 老版Mozilla */
object.KhtmlOpacity = (opacity / ); /**//* 老版Safari */
object.opacity = (opacity / ); /**//* 支持opacity的浏览器*/
效果如下图:
opacity兼容性问题的更多相关文章
- opacity兼容性以及存在问题处理
opacity兼容性以及存在问题处理 opacity兼容性 opacity属性是CSS3的属性,用于设置元素的不透明级别.语法: opacity: value | inherit; ①值value表示 ...
- javascript opacity兼容性随笔
一.CSS兼容代码 .transparent { filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* FireFox old version ...
- 【原】CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- CSS实现背景透明,文字不透明(兼容所有浏览器)
我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方 ...
- javascript中一些常见的兼容性问题
下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子 1. document.formName.item("itemName") 问题 说明:IE下,可以使 ...
- 兼容性背景颜色半透明CSS代码(不影响内部子元素)
如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...
- CSS 多浏览器兼容性问题及解决方案
兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...
- CSS实现兼容性的渐变背景(gradient)效果
利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码: .gradient{ width:300px; heigh ...
随机推荐
- 熟悉使用ssm框架完成项目
羡慕那些一些博客就能写好多的人,总是能写的长篇大论的,而我就是简短的而且还伴随着语句不通顺等等,只写一点点,归根结底还是自己懒得写! 1.首先了解框架内容,拿到源码,先看配置文件 2.然后修改数据库建 ...
- js 为url字符串添加、修改参数
//为url字符串添加.修改参数 String.prototype.EditUrlParam = function (paramName, replaceWith) { var url = this; ...
- Flink task之间的数据交换
Flink中的数据交换是围绕着下面的原则设计的: 1.数据交换的控制流(即,为了启动交换而传递的消息)是由接收者发起的,就像原始的MapReduce一样. 2.用于数据交换的数据流,即通过电缆的实际数 ...
- java中需要转义的特殊字符
在Java中,不管是String.split(),还是正则表达式,有一些特殊字符需要转义, 这些字符是 ( [ { / ^ - $ ¦ } ] ...
- Java中转换为十六进制的几种实现
public class HexUtil { private static final String[] DIGITS_UPPER = {"0", "1", & ...
- Linux 笔记 - 第二十四章 配置 Tomcat
一.前言 Tomcat 是 Apache 软件基金会(Apache Software Foundation)Jakarta 项目中的核心项目,由 Apache.Sun 和其他一些公司及个人共同开发.使 ...
- 2019-11-29-C#-字典-Dictionary-的-TryGetValue-与先判断-ContainsKey-然后-Get-的性能对比
原文:2019-11-29-C#-字典-Dictionary-的-TryGetValue-与先判断-ContainsKey-然后-Get-的性能对比 title author date CreateT ...
- mini Redis(项目 二)
一个仿Redis的内存数据库(主要用来做命令解析)服务端, 客户端使用的开源工具 : https://dom4j.github.io/ github:https://github.com/h ...
- [转] golang 字符串比较是否相等
1 前言 strings.EqualFold不区分大小写,"==" 区分且直观. 2 代码 golang字符串比较的三种常见方法 fmt.Println("go" ...
- 1-RocketMq 学习 中文文档(一)
原文:https://blog.csdn.net/weixin_40533111/article/details/84451096 1.基本概念及优势 rocketmq是一个基于发布订阅队列模型的消息 ...