javascript - CSS 中的透明 UI 框

Question

我正在尝试制作一个透明的玻璃盒，类似于这张图片中显示的内容:

我不知道我的 CSS 有什么问题，因为它看起来像一个白框(低不透明度)，基本上它没有图片中显示的外观或感觉。我想知道是否有人知道如何实现这样的目标？

我的 CSS(我尝试了一些方法，例如模糊或不透明，但都没有产生我想要的结果):

.body-bg-color{

   background: #00467F;
   background: -webkit-linear-gradient(to right, #A5CC82, #00467F);  
   background: linear-gradient(to right, #A5CC82, #00467F); 
}
    
div.glass-bg-color::before {
    z-index: -1;
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    //    filter: blur(4px);
    //    box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
    opacity: 0.3;
    background-color: rgba(255,255,255, 1);
}
    
.glass-bg-color {
    color: white;
    position: relative;
}

<div class="body-bg-color">

    <div class="glass-bg-color">
    Foo
    </div>
    
    <div class="glass-bg-color">
    Bar
    </div>
    
    <div class="glass-bg-color">
    Baz
    </div>

</div>

Answer 1

您展示的示例使用径向渐变作为底层元素的背景，并使用透明白色作为“玻璃”效果。例如，我创建了一个椭圆形背景渐变(作者 modifying an example on MDN) 将其作为透明图像放置在主体的纯色背景之上。

玻璃效果现在只是容器元素上的透明白色背景。我使用内联 block 进行演示:

body {
  margin: 0px;
  width: 100vw;
  height;: 100vh;
  background-color: #00467F;
  background-image:
     radial-gradient(ellipse farthest-corner at 80vw 15vh ,
      rgba( 250, 240, 128, 0.5) 5%, rgba( 250,240,128,0) 95%
  );
  background-attachment:fixed;
}
.glass {
   background-color: rgba( 255,255, 255, 0.1); /* transparent white */
   color:white;
   display:inline-block;
   border-radius: 15px;
   padding: 10px;
}

<div class="glass"
  style="margin-left:50vw; margin-top: 20vh; width: 80px; height: 180px;">
 Hello Folks!
</div> 

(请注意，如果主体边距不为零，主体背景的 CSS 可能会产生不需要的滚动条。零宽度主体边距的替代方法可能是创建一个固定位置的背景元素，其 z-index 为 -1。之前的讨论问题的详细信息可以在 CSS3 gradient background set on body doesn't stretch but instead repeats? 找到，我已经发现它很有用。