这个想法来自街机柜的想法。假设您的项目中有2层。Z索引为-1的第1层具有蓝色的背景。我希望最高的Div是黑色的,而Div的内部区域是半透明的,类似于街机柜上的窗户。我将如何解决此问题?
给您一个想法,它看起来像:街机柜屏幕
您是:
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>
您无法做到这一点。您需要有多层组成"橱柜"立面。这些会坐在顶部。蓝色可能在-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。
使用两个Divs时,您会面临的问题是屏幕的框架看起来灰色而不是所需的黑色效果。
要完成您想要的目标,您需要以不同的方式考虑分层,然后是如何构建街机机。
- 黑屏表圈是最低层(
#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>