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

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

spfLinux

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

阅读量597

点赞数

分类专栏：浏览器兼容性文章标签： CSS 浏览器兼容性 opacity

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

7 篇文章

订阅专栏

<!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参考手册》