在HTML+CSS中使用opacity后float无效的问题

最新推荐文章于 2024-11-14 21:40:32 发布

原创最新推荐文章于 2024-11-14 21:40:32 发布 · 455 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用CSS对HTML元素进行样式设置，包括宽度、高度、边框、浮动和透明度等属性的运用，同时展示了不同元素间的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<style type="text/css">
		#a1 {
			width: 100px;
			height: 100px;
			border: 1px solid blue;
			float: left;
			background-color: white;
		}
		#a2 {
			width: 200px;
			height: 200px;
			border: 1px solid blue;
			background-color: black;
			opacity: 0.6;
		}
		body {
			margin: 0;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div id="a1"></div>
	<div id="a2"></div>
</body>
</html>

测试结果截图：
在这里插入图片描述