CSS中的透明UI框答案

【问题标题】：transparent UI box in CSSCSS中的透明UI框
【发布时间】：2017-09-07 03:23:58
【问题描述】：

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

我不知道我的 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>

【问题讨论】：

这是因为您看到的是纯色背景图像（带有渐变），而方框是低不透明度的白色背景。
什么图片？示例链接指向谷歌搜索，其中显示了许多框，可能在世界不同地区有所不同。
@Traktor53 对图像感到抱歉，如果您稍等片刻，它将加载图像。这是图像的 URL：i.pinimg.com/736x/d4/24/50/d4245021322d952524a5035756b10f1f.jpg。我也更改了问题中的链接。
您应该使用 rgba，其中 a 的值为 alpha a.k.a. opacity。如果您使用不透明度，您的文本也将是半透明的，因此会产生令人不快的结果。
您是在寻找渐变来复制背景图像还是框中的背景？

标签： javascript html css

【解决方案1】：

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

玻璃效果现在只是容器元素上的透明白色背景。我使用了一个 inline-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? 找到这个问题，我已经发现它很有用。

【讨论】：

【解决方案2】：

答案实际上只是在框背景上应用不透明度低的白色：

CSS：

body {
    position: relative;
    width: 100%;
    background: #00467F;
    background: -webkit-linear-gradient(left, #A5CC82, #00467F);
    background: -moz-linear-gradient(left, #A5CC82, #00467F);
    background: -o-linear-gradient(left, #A5CC82, #00467F);
    background: linear-gradient(to right, #A5CC82, #00467F);   
}


.glass-bg-color {
    position: relative;
    display: inline-block;
    float: left;
    margin: 20px;
    width: 200px;
    height: 200px;
    border-radius: 4px;
    text-align: center;
    background-color: rgba(255,255,255,.08);
    color: white;
}

HTML： `

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

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

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

在这里查看小提琴：https://jsfiddle.net/4y8bx2eg/

【讨论】：

【解决方案3】：

您当前的背景不透明度设置为 1。它应该更接近 0.2。而且你的 box-shadow 的传播半径是 3000px，应该根据你的元素的大小设置更多，我还建议稍微改变一下 blur-radius，目前是零。

这是否更像您正在寻找的？

.body-bg-color{
  background: #00467F;
  background: -webkit-linear-gradient(to right, #A5CC82, #00467F);  
  background: linear-gradient(to right, #A5CC82, #00467F); 
  text-align: center;
}

.glass-bg-color {
  box-shadow: inset 0 0 50px 10px rgba(255,255,255,0.2);
  background-color: rgba(255,255,255, 0.2);
  color: white;
  position: relative;
  display: inline-block;
  padding: 10em;
}

【讨论】：