CSS прозрачные окна

1

Эта идея исходит из идеи аркадного кабинета. Допустим, у вас есть 2 слоя в проекте. Слой 1 с z-индексом -1 имеет синий фон. Я хочу, чтобы самый верхний элемент div был черным, а внутренняя область элемента div - полупрозрачной, как окно в аркадном шкафу. Как бы я решил эту проблему?

Чтобы дать вам представление, это будет выглядеть так: Экран Arcade Cabinet

  • 3
    Вы уже пробовали какое-нибудь решение?
  • 0
    Кроме того, я думаю, вы захотите, чтобы наложенный div содержал изображение. «фильтр», чтобы обеспечить эффект.
Показать ещё 1 комментарий
Теги:
sass

4 ответа

0

Вот ты где:

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>
0

Вы не можете сделать это... так, как вы хотите. Вы должны иметь несколько слоев, составляющих фасад "кабинета". Они будут сидеть на вершине. Синий может быть на заднем плане в -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>
0

Попробуйте использовать три слоя.
Экран может быть синим, а за ним у вас большой черный div в качестве рамки экрана. В верхней части экрана вы можете поместить прозрачный div.
Проблема, с которой вы столкнетесь при использовании двух элементов div, заключается в том, что рамка экрана будет выглядеть серой вместо желаемого эффекта черного.

0

Чтобы выполнить то, что вы хотите, вам нужно думать о наслоении иначе, чем при создании аркадной машины.

  • Черная рамка экрана - самый нижний слой (# #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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню