数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
服装研究
法学研究使用 CSS 设置跨浏览器透明度
属性 opacity 是现代解决方案，适用于 Firefox、Safari、opera 以及所有版本的 Chrome。-moz-opacity 属性是 Firefox 的 opacity 属性，而 –khtml-opacity 属性是 Safari 的属性。filter 属性可产生类似于 opacity 的效果。将所有这些值作为现代 opacity 的后备方式，可使我们在所有浏览器中使用 opacity。
设置图片
我们将检查图片的跨浏览器透明度。上面的第二张图片在所有浏览器上都会变暗 −
<img src="https://tutorialspoint.com/python/images/python.jpg" /> <img class="transparent" src="https://tutorialspoint.com/python/images/python.jpg" />
第二张图片的透明度
使用 opacity 属性，设置第二张图片的透明度 −
.transparent {
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
跨浏览器透明度
-moz-opacity 属性是 Firefox 的 opacity 属性 −
-moz-opacity: 0.3;
–khtml-opacity 属性是 Safari 版本的属性 −
-khtml-opacity: 0.3;
示例
以下代码使用 CSS 实现跨浏览器透明度 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
img {
width: 270px;
height: 200px;
}
.transparent {
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Cross browser opacity</h1>
<img src="https://tutorialspoint.com/python/images/python.jpg" />
<img class="transparent" src="https://tutorialspoint.com/python/images/python.jpg" />
<h3>The second image above will get opaque on all browsers</h3>
</body>
</html>
更新于: 2023 年 12 月 27 日
285 次浏览
广告