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 ...
随机推荐
- python3中用django下载文件,中文名乱码怎么办?
前段时间被某个前端小可爱鄙视了一下,说我博客都一年不更新了,我不服,明明还有俩月才到一年呢.不过说是这么说,还是要更新一下的. 以上都是借口,下面开始正文. 我公司的某个内部系统,用djang ...
- 零次学习(Zero-Shot Learning)入门(转)
很久没有更文章了,主要是没有找到zero-shot learning(ZSL)方面我特别想要分享的文章,且中间有一段时间在考虑要不要继续做这个题目,再加上我懒 (¬_¬),所以一直拖到了现在. 最近科 ...
- SpringBoot第十五篇:swagger构建优雅文档
作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11007470.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言 前面的十四 ...
- springmvc项目转为springboot
说明 如果你的项目连maven项目都不是,请自行转为maven项目,在按照本教程进行. 本教程适用于spring+springmvc+mybatis+shiro的maven项目. 1.修改pom文件依 ...
- jdk1.8 Stream 特性总结
不是数据结构 它没有内部存储,它只是用操作管道从 source(数据结构.数组.generator function.IO channel)抓取数据. 它也绝不修改自己所封装的底层数据结构的数据.例如 ...
- 在Button样式中添加EventSetter,理解路由事件
XML <Window.Resources> <Style x:Key="ButtonStyle2" TargetType="{x:Type Butto ...
- 直接操作DOM一定比虚拟DOM操作耗时,diff算法,key值,虚拟 DOM的定义
直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚 ...
- 【07】Kubernets:资源清单(控制器 - DaemonSet)
写在前面的话 前面讲解了 Pod / ReplicaSet / Deployment 的资源清单,我们这里谈一下 DaemonSet 的资源清单. 之前说过,DaemonSet 控制器能够保证资源在每 ...
- .NET MVC 支付宝支付(即时到账)
已经好久没有搞过.NET了,朋友有一个网站 ,需要接入支付宝功能,重新对接了一下. 1.开发前,需要一个企业支付宝账号登录,获取 PID和 配置密钥 官方文档:https://docs.open.al ...
- windows配置flutter的注意点
参考官网配置:https://flutter.cn/docs/get-started/install/windows 注意点: 1. 配置好环境变量后,必须重启电脑才有效果(后面还有需要重启的,所以到 ...