Javascript CSS透明窗口
这个想法来源于拱廊橱柜的想法。假设一个项目中有两个层。z指数为-1的第1层背景为蓝色。我希望最上面的div是黑色的，div的内部区域是半透明的，类似于拱廊橱柜上的窗户。我将如何解决这个问题 给你一个想法，它看起来像：Javascript CSS透明窗口,javascript,css,sass,Javascript,Css,Sass,这个想法来源于拱廊橱柜的想法。假设一个项目中有两个层。z指数为-1的第1层背景为蓝色。我希望最上面的div是黑色的，div的内部区域是半透明的，类似于拱廊橱柜上的窗户。我将如何解决这个问题 给你一个想法，它看起来像： 你不能那样做。。。以你想要的方式。您需要有多个层组成“橱柜”立面。这些可以放在上面。蓝色可能在-1的背景中。如果你想把“半透明”部分放在里面，那可能是一个单独的层 下面的立面分为四个“部分”：顶部、右侧、底部和左侧。屏幕本身位于一层中。眩目的目光停留在另一个地方 屏幕{ z指数：
你不能那样做。。。以你想要的方式。您需要有多个层组成“橱柜”立面。这些可以放在上面。蓝色可能在-1的背景中。如果你想把“半透明”部分放在里面，那可能是一个单独的层 下面的立面分为四个“部分”：顶部、右侧、底部和左侧。屏幕本身位于一层中。眩目的目光停留在另一个地方
屏幕{
z指数：-1；
右侧：0；顶部：0；左侧：0；底部：0；
背景颜色：蓝色；
位置：绝对位置；
}
.屏风组{
边缘顶部：90像素；
颜色：黄色；
文本对齐：居中；
字体家族：幻想；
}
.件{
z指数：1；
背景色：黑色；
位置：绝对位置；
}
.顶{
高度：4%；宽度：100%；
顶部：0；左侧：0；
}
.底部{
高度：4%；宽度：100%；
底部：0；左侧：0；
}
.对{
高度：100%；宽度：2%；
顶部：0；右侧：0；
}
.左{
高度：100%；宽度：2%；
顶部：0；左侧：0；
}
.眩光{
z指数：0；
背景：径向梯度（75%35%，rgba（200200,0.5），rgba（2400,0.3））；
右侧：0；顶部：0；左侧：0；底部：0；
位置：绝对位置；
}
按任意按钮继续。。。
屏幕可以是蓝色的，后面有一个大的黑色div作为屏幕框架。您可以在屏幕顶部放置一个透明div.
当使用两个div时，您将面临的问题是，屏幕的框架将看起来是灰色的，而不是所需的黑色效果。要实现您想要的效果，您需要考虑以不同的方式进行分层，然后再考虑如何构建拱廊机
- 黑屏挡板是最底层（
）#挡板 - 屏幕是中间层（
）#screen - 覆盖层是顶层（
）#覆盖层
#挡板，
#叠加，
#屏风{
高度：240px；
宽度：256px；
}
#叠加，
#屏幕图像{
边界半径：20px；
}
#挡板{
背景色：黑色；
填充：50px；
}
#覆盖层{
z指数：2；
位置：绝对位置；
背景色：rgba（0,0,255,0.4）；
}
正文{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100vh；
透视图：1000px；
}
#{
边界半径：7vh；
宽度：102vh；
高度：77vh；
盒影：0 50vw#000；
变换：rotateX（-3deg）；
背景：线性渐变（0，rgba（0,0,0,3）1px，透明0）0/1px 3px，url(https://picsum.photos/800/600)0/套
}