CSS 透明窗口答案

【问题标题】：CSS Transparent WindowsCSS 透明窗口
【发布时间】：2018-12-19 13:13:08
【问题描述】：

这个想法来自街机柜的想法。假设您在一个项目中有 2 个图层。 z-index 为 -1 的第 1 层具有蓝色背景。我希望最上面的 div 是黑色的，div 的内部区域是半透明的，类似于街机柜上的窗口。我该如何解决这个问题？

给你一个想法，它看起来像： Arcade Cabinet Screen

【问题讨论】：

您是否尝试过任何解决方案？
另外，我认为您会希望覆盖 div 包含图像。 'filter' 来提供效果。
分享你的代码？@Hamburguesa

【解决方案1】：

你在这里：

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
}

&lt;div id="s"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

你不能这样做......以你想要的方式。您需要有多个层组成“内阁”立面。这些将位于顶部。蓝色可能在 -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>

【讨论】：

【解决方案3】：

尝试使用三层。
屏幕可以是蓝色的，后面你有一个大的黑色 div 作为屏幕框架。在屏幕顶部，您可以放置一个透明 div。
使用两个 div 时会遇到的问题是屏幕边框看起来是灰色的，而不是想要的黑色效果。

【讨论】：

【解决方案4】：

要完成您想要的，您需要考虑以不同于构建街机的方式进行分层。

黑屏边框是最底层(#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>

【讨论】：