适用于所有 Web 浏览器(包括 IE 8 及更低版本)的 CSS 图像不透明度

cssweb developmentfront end technology更新于 2025/12/11 3:24:17

属性 opacity 是终极且现代的解决方案，适用于 Firefox 0.9+、Safari 2、Opera 9+、IE 9+ 以及所有版本的 Google 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>Opacity example</h1>
<img src="https://i.picsum.photos/id/505/800/800.jpg" >
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" >
</body>
</html>