gpt4 book ai didi

html - CSS - 用半透明的黑色覆盖整个页面

转载 作者:行者123 更新时间:2023-11-28 17:26:56 28 4
gpt4 key购买 nike

我有一个包含一些图像的页面(它们是您可以选择的字符),当它们被点击时我想要图片中的结果......我无法得到的是让半透明的黑色矩形覆盖整个页面...有什么建议吗?

谢谢

What I have

What I want

编辑:这是我最初尝试的代码,它没有用,因为颜色在图像下面:

<body>
<div class = "cover">
<img src="images/1.PNG">
<img src="images/2.PNG">
<img src="images/3.PNG">
<img src="images/4.PNG">
<img src="images/5.PNG">
<img src="images/6.PNG">
<img src="images/7.PNG">
<img src="images/8.PNG">
</div>
</body>

使用这个 CSS:

.cover {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.6;
}

最佳答案

快速了解如何让它发挥作用。然后可以将类“在顶部”切换到您选择的任何卡片。

.overlay{
position: absolute;
top: 0;
left:0;
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.5);
z-index: 2;
}

.card{
position: relative;
display: block-inline;
float: left;
margin: 10px;
width: 100px;
height: 150px;
background-color: red;
}

.on-top{
z-index: 3;
}
<div class="card"></div>
<div class="card"></div>
<div class="card on-top"></div>
<div class="card"></div>


<div class="overlay"></div>

关于html - CSS - 用半透明的黑色覆盖整个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39307023/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com