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

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

给你一个想法,它看起来像: Arcade Cabinet Screen

【问题讨论】:

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

标签: javascript css sass


【解决方案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
}
<div id="s"></div>

【讨论】:

    【解决方案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>

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2013-02-21
          • 2012-08-04
          • 1970-01-01
          • 2023-04-02
          • 1970-01-01
          • 1970-01-01
          • 2019-04-24
          • 2020-11-16
          相关资源
          最近更新 更多