我不知道如何准确解释我的问题,也不知道标题是否足够具体。但我想做的是,例如,我有一个像 Tic Tac Toe 这样的游戏,如果游戏完成,整个屏幕上应该弹出一条消息,该消息会阻止除只有一个按钮之外的任何其他交互。像那样:我认为与display: ???
2 回答
白衣非少年
TA贡献1155条经验 获得超0个赞
我为您做了一个简单的例子:
<head>
<style>
.content {
color: red;
}
.overlay {
z-index: 1;
width:100vw;
height: 100vh;
position: absolute;
top: 0;
left:0;
background-color:black;
opacity: 0.8;
}
.msg {
background-color: white;
width: 70px;
padding: 50px;
font-weight: bold;
text-align:center;
position: absolute;
top:40%;
left: 45%;
}
</style>
</head>
<body>
<p class="content">some content</p>
<div class=overlay>
<p class="msg">TEST</p>
</div>
</body>
</html>
这会在整个屏幕上显示黑色覆盖层,并带有“TEST”消息,如果需要,您可以将更多项目(例如按钮)添加到“覆盖层”-div 中。
但请记住,要使用“位置:绝对;” 属性。
您可以通过将“display: none”(隐藏)CSS 属性设置为“overlay”-div 或设置“display: revert;”来显示或隐藏它。展示它
- 2 回答
- 0 关注
- 118 浏览
添加回答
举报
0/150
提交
取消