浏览器兼容性2—opacity（设置不透明度）

最新推荐文章于 2023-08-28 08:07:14 发布

转载最新推荐文章于 2023-08-28 08:07:14 发布 · 624 阅读

文章标签：

#CSS 浏览器兼容性 opacity

浏览器兼容性专栏收录该内容

7 篇文章

订阅专栏

本文通过实例演示了如何使用CSS设置不同透明度的div元素，并对比了完全不透明和半透明的效果差异。文章还探讨了IE浏览器下透明度设置的问题。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		h1 {
			margin: 10px 0;
			font-size: 16px;
		}
		.test, .test2 {
			width: 300px;
			height: 150px;
			padding: 10px;
		}
		.test {
			background: #050;
		}
		.test2 {
			margin: -120px 0 0 50px;
			background: #000;
			filter: alpha(opacity=50); /* for IE8 and earlier */
			opacity: .5;  /* for IE9 and other browser */
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="test">不透明度为100%的box</div>
	<div class="test2">不透明度为50%的box</div>
</body>
</html>

opacity为1.0时（完全不透明）

虽然设置了filter，但是效果还不是很好（其实和不用差不多）

摘录于：《CSS参考手册》