使用 CSS 设置跨浏览器不透明度

cssweb developmentfront end technology更新于 2025/11/27 6:36:17

属性 opacity 是现代解决方案，适用于 Firefox 0.9+、Safari 2、Opera 9+、IE 9+ 以及所有版本的 Chrome。-moz-opacity 属性适用于 Firefox 0.9 之前的版本，而 –khtml-opacity 属性适用于从 1 开始的 Safari 版本。filter 属性适用于 IE 5 到 9 的浏览器，可实现类似不透明度的效果。将所有这些值结合使用作为现代不透明度的后备方案，我们可以在所有浏览器中使用不透明度。

以下是使用 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://i.picsum.photos/id/605/800/800.jpg" />
<img class="transparent" src="https://i.picsum.photos/id/605/800/800.jpg" />
<h3>The second image above will get opaque on all browsers</h3>
</body>
</html>