不透明度背景上的div出现问题

Question

我是初级web开发人员。

我有这个代码：

.modal {
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
display: inline-block;
padding: 1em;
}
.modal__overlay {
background: #000000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
text-shadow: none;
top: 0;
z-index: 600;
}
.modal__wrap {
position: relative;
margin: 0 auto;
width: 90%;
margin-top: 30px;
max-width: 600px;
max-height: 600px;
background-color: white;
padding: 1.5em;
}
#modal__title {
color: black;
font-size: 18px;
padding-top: 20px;
}
#modal__desc {
margin: 0;
color: black;
font-size: 16px;
padding-top: 1px;
}
.closePopupBtn {
clear: both;
color: white;
background-color: #ED1B23;
line-height: 1.65;
display: block;
width: 140px;
height: 50px;
text-align: center;
font-size: 30px;
margin: 10px auto;
padding-bottom: 30px;
cursor: pointer;
text-transform: uppercase;
}
.modal input:focus~label {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
input {
position: absolute;
top: -1000px;
}
.modal__overlay {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: -100;
}
input:checked~.modal__overlay {
background-color: black;
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
z-index: 800;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="modal">
<input id="modal__trigger" type="checkbox" />
<label for="modal__trigger">pokaz</label>
<div class="modal__overlay" role="dialog" aria-labelledby="modal__title" aria-describedby="modal_desc">
<div class="modal__wrap">
<img src="{{ asset('img/popup1.png') }}" class="img-fluid">
<h2 id="modal__title">This is your modal content</h2>
<p id="modal__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus.
In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>
<label for="modal__trigger" class="closePopupBtn">Zamknij</label>
</div>
</div>
</div>

代码运行良好，但屏幕中央的弹出窗口也是透明的。我只希望背景是透明的-弹出窗口不应该是透明的。

如何修复？

预览：http://serwer1356363.home.pl/pub/popup.html点击"显示"后，我有动画。工作不错。我的问题只是带有文本的div

Answer 1

这样？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="modal">
<input id="modal__trigger" type="checkbox" />
<label for="modal__trigger">pokaz</label>
<div class="modal__overlay" role="dialog" aria-labelledby="modal__title" aria-describedby="modal_desc">
<div class="modal__wrap">
<img src="{{ asset('img/popup1.png') }}" class="img-fluid">
<h2 id="modal__title">This is your modal content</h2>
<p id="modal__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>
<label for="modal__trigger" class="closePopupBtn">Zamknij</label>
</div>
</div>
</div>
<style>
.modal {
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
display: inline-block;
padding: 1em;
}
.modal__overlay {
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
text-shadow: none;
top: 0;
z-index: 600;
}
.modal__wrap {
position: relative;
margin: 0 auto;
width: 90%;
margin-top: 30px;
max-width: 600px;
max-height: 600px;
background-color: white;
padding: 1.5em;
z-index: 1000;
}
#modal__title {
color: black;
font-size: 18px;
padding-top: 20px;
}
#modal__desc {
margin: 0;
color: black;
font-size: 16px;
padding-top: 1px;
}
.closePopupBtn {
clear: both;
color: white;
background-color: #ED1B23;
line-height: 1.65;
display: block;
width: 140px;
height: 50px;
text-align: center;
font-size: 30px;
margin: 10px auto;
padding-bottom: 30px;
cursor: pointer;
text-transform: uppercase;
}
.modal input:focus ~ label {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
input {
position: absolute;
top: -1000px;
}
.modal__overlay {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: -100;
background-color: black;
}
.modal__overlay::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
opacity: 0.5;
background-color: white;
opacity: 1;
}
input:checked ~ .modal__overlay {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
z-index: 800;
}
input:checked ~ .modal__overlay::after {
content: '';
opacity: 0.5;
}
</style>

Answer 2

您正在设置透明度

.modal__overlay {
opacity: 0; <---------- delete this line
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: -100;

}