css实现shadow窗口

最新推荐文章于 2025-01-17 23:19:46 发布

xdajian

最新推荐文章于 2025-01-17 23:19:46 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript CSS Web

本文链接：https://blog.youkuaiyun.com/xdajian/article/details/84010809

Javascript 同时被 3 个专栏收录

55 篇文章

订阅专栏

Web

44 篇文章

订阅专栏

CSS

22 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS实现具有半透明遮罩和窗口遮挡效果的阴影窗口，包括关键样式属性和布局策略。

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

/*关键点：
 1 半透明的兼容写法：opacity:0.5,filter:alpha(opacity:50);
 2 z-index:要想z-index起作用必须给dom元素添加position:absolute;
 3 窗口遮挡效果的实现：shadow的div添加：display="display" 不是disabled */

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>shadow窗口</title>
<style>
	.shadow{
		opacity:0.5 !important;/*关键*/
		padding:0px;
		margin:0px;
		position:absolute;/*关键*/
		top:0px;
		left:0px;
		z-index:100;/*关键*/
		width:100%;
		height:100%;
		background:gray;/*关键*/
		filter:alpha(opacity:50);/*关键*/
	}
</style>
</head>

<body style="border:1px solid red;padding:0px;margin:0px;">
<div class="shadow" readonly="readonly"></div>
<input type="button" value="alert('aaaaaaaaaaa')" onclick="alert('aaaaaaaaaaa')">
<div style="z-index:20000;position:absolute;top:20%;left:30%;">
<input type="button" value="alert('bbbbbbbbbbbbbb')" onclick="alert('bbbbbbbbbbbbbb')">
</div>
</body>
</html>