Как я могу увидеть фон блока, если его перекрывает другой блок
Проблема очень интересная, у меня есть блок с анимацией (wrapper), в этом блоке находится другой блок (form-container) с черным фоном, мне необходимо, чтоб кнопка, лежащая внутри формы была прозрачной и в ней был виден фон блока wrapper (то есть та самая анимация). Но их уже разделяет другой блок с темным фоном... Подскажите как это сделать? Фон кнопки должен отображать фон блока wrapper. HEEELP ME
.wrapper {
position: relative;
width: 800px;
height: 50vh;
/* display: grid;
grid-template-columns: 1fr 1fr; */
border: 3px solid #00ffff;
box-shadow: 0 0 50px 0 #00a6bc;
background: linear-gradient(to right, #0ef, #c800ff,
#0ef,
#c800ff);
background-size: 200% 200%;
transition: background-position 100s ease;
animation: rotateColors 10s linear infinite;
}
.form-container {
clip-path: polygon(0 0, 43% 0, 77% 100%, 0% 100%);
display: flex;
align-items: center;
justify-content: center;
background: #081b29;
}
.inp {
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}
.submit {
border: none;
outline: none;
width: 288px;
margin-top: 25px;
padding: 10px 0;
font-size: 20px;
border-radius: 40px;
letter-spacing: 1px;
cursor: pointer;
background-color: transparent;
}<div class="wrapper">
<div class='form-container'>
<form action="" class="form">
<h1 class="title">SomeSeries</h1>
<div class="inp">
<input type="text" name="" id="" class="input" placeholder="Логин">
<i class="fa-solid fa-user"></i>
</div>
<div class="inp">
<input type="password" name="" id="" class="input" placeholder="Пароль">
<i class="fa-solid fa-lock"></i>
</div>
<button class="submit">Авторизироваться</button>
<p class="footer">Нет аккаунта? <a href="#" class="link">Зарегистрироваться</a></p>
</form>
<div class="banner">
<div class="container">
<p class="para" id="head1">Добро пожаловать!</p>
<p class="para" id="head2">SomeSeries - ваш проводник</p>
<p class="para" id="head3">По миру кино и сериалов</p>
<p class="para" id="head4">Начнём!</p>
</div>
</div>
</div>
</div>