博客
关于我
Opacity多浏览器透明度兼容处理
阅读量:791 次
发布时间:2023-02-23

本文共 740 字,大约阅读时间需要 2 分钟。

用来设定元素透明度的 Opacity 是CSS 3中的一个属性。虽然目前只有少数浏览器支持这种属性,但各大浏览器都为其提供了私有属性来实现类似的效果。

在IE浏览器中,可以使用 filter: alpha(opacity) 来实现;而Mozilla老版本则使用 -moz-opacity,Safari老版本则采用 -khtml-opacity。值得注意的是,Opera的老版本并没有对应的私有属性来代替 opacity,不过新版Opera已经完全支持 opacity 属性了。

如果需要在不同浏览器中统一设置元素的透明度,通常会采取以下方式:

1. opacity: 0.5; /* 支持 opacity 的浏览器 */

2. filter: alpha(opacity=50); /* IE */

3. -moz-opacity: 0.5; /* 老版Mozilla */

4. -khtml-opacity: 0.5; /* 老版Safari */

此外,通过JavaScript也可以动态设置元素的透明度。例如:

1. object.filter = "alpha(opacity=" + opacity + ")"; /* IE */

2. object.MozOpacity = opacity / 100; /* 老版Mozilla */

3. object.KhtmlOpacity = opacity / 100; /* 老版Safari */

4. object.opacity = opacity / 100; /* 支持 opacity 的浏览器 */

转载于: https://www.cnblogs.com/seven077/p/4646084.html

你可能感兴趣的文章
ollama运行多模态模型如何进行api测试?
查看>>
OMG,此神器可一次定一周的外卖
查看>>
Omi 多端开发之 - omip 适配 h5 原理揭秘
查看>>
On Error GOTO的好处
查看>>
onclick事件的基本操作
查看>>
oncopy和onpaste
查看>>
onCreate中的savedInstanceState作用
查看>>
onCreate()方法中的参数Bundle savedInstanceState 的意义用法
查看>>
One good websit for c#
查看>>
One-Shot学习/一次学习(One-shot learning)
查看>>
OneASP 安全公开课,深圳站, Come Here, Feel Safe!
查看>>
OneBlog Shiro 反序列化漏洞复现
查看>>
oneM2M
查看>>
Oneplus5重装攻略
查看>>
one_day_one--mkdir
查看>>
ONI文件生成与读取
查看>>
Vue 项目中实现高效的消息提示与确认对话框功能(模版)
查看>>
Online PDF to PNG、JPEG、WEBP、 TXT - toolfk
查看>>
onlstm时间复杂度_CRF和LSTM 模型在序列标注上的优劣?
查看>>
onlyoffice新版5.1.2版解决中文汉字输入重复等问题
查看>>