CSS прозрачные окна
Эта идея возникла из идеи аркадного шкафа. Допустим, у вас есть 2 слоя в проекте. Слой 1 с z-index, равным -1, имеет синий фон. Я хочу, чтобы самый верхний div был черным, а внутренняя часть div была полупрозрачной, как окно в аркадном шкафу. Как мне решить эту проблему?
Чтобы дать вам представление, это будет выглядеть так: Экран шкафа аркады
Кроме того, я думаю, вы захотите, чтобы оверлейный div содержал изображение. «фильтр», чтобы обеспечить эффект.
Поделитесь своим кодом? @Hamburguesa
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы не можете сделать это ... как хотите. Вам потребуется несколько слоев, составляющих фасад «шкафа». Они будут сидеть наверху. Синий может быть в фоновом режиме при -1. Если вы хотите, чтобы там была «полупрозрачная» часть, то это, вероятно, был бы отдельный слой.
Фасад внизу состоит из четырех «частей»: вверху, справа, внизу, слева. Сам экран сидит в одном слое. Блики сидят в другом.
.screen{
z-index:-1;
right:0;top:0;left:0;bottom:0;
background-color:blue;
position:absolute;
}
.screen div{
margin-top:90px;
color: yellow;
text-align: center;
font-family: fantasy;
}
.piece{
z-index:1;
background-color:black;
position:absolute;
}
.top{
height:4%;width:100%;
top:0;left:0;
}
.bottom{
height:4%;width:100%;
bottom:0;left:0;
}
.right{
height:100%;width:2%;
top:0;right:0;
}
.left{
height:100%;width:2%;
top:0;left:0;
}
.glare{
z-index:0;
background: radial-gradient(75% 35%, rgba(200,200,200,0.5), rgba(240,240,240,0.3));
right:0;top:0;left:0;bottom:0;
position:absolute;
}<div class = "top piece"></div>
<div class = "right piece"></div>
<div class = "bottom piece"></div>
<div class = "left piece"></div>
<div class = "glare"></div>
<div class = "screen">
<div>press any button to continue...</div>
</div>Попробуйте использовать три слоя.
Экран может быть синим, а за ним у вас есть большой черный div в качестве рамки экрана. Поверх экрана можно поставить прозрачный div.
Проблема, с которой вы столкнетесь при использовании двух div, заключается в том, что рамка экрана будет выглядеть серой вместо желаемого черного эффекта.
Чтобы достичь того, что вы хотите, вам нужно думать о наслоении иначе, чем о том, как строится аркадный автомат.
- Черная рамка экрана - самый нижний слой (
#bezel) - Экран средний слой (
#screen) - Накладка - это верхний слой (
#overlay)
#bezel,
#overlay,
#screen {
height: 240px;
width: 256px;
}
#overlay,
#screen img {
border-radius: 20px;
}
#bezel {
background-color: black;
padding: 50px;
}
#overlay {
z-index: 2;
position: absolute;
background-color: rgba(0, 0, 255, 0.4);
}<section id = "bezel">
<section id = "overlay"></section>
<section id = "screen">
<img src = "https://www.mobygames.com/images/shots/l/116293-rad-racer-ii-nes-screenshot-driving-off-into-the-sunset.png" />
</section>
</section>А, вот и ты:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
perspective: 1000px;
}
#s {
border-radius: 7vh;
width: 102vh;
height: 77vh;
box-shadow: 0 0 0 50vw #000;
transform: rotateX(-3deg);
background: linear-gradient(0, rgba(0, 0, 0, .3) 1px, transparent 0) 0 / 1px 3px, url(https://picsum.photos/800/600) 0 0 /cover
}<div id = "s"></div>
Вы уже пробовали какое-нибудь решение?