如何在不降低表单元素不透明度的情况下重新创建这样的 Web 表单？答案

【问题标题】：How do I recreate a web form like this without reducing the opacity of form elements?如何在不降低表单元素不透明度的情况下重新创建这样的 Web 表单？
【发布时间】：2015-06-25 00:47:16
【问题描述】：

我想在我的网站上创建一个与此类似的表单。不幸的是，当我降低包含表单元素的 div 的不透明度时，电子邮件、密码和文本的不透明度也会降低。如何制作这样的表单，其中只有周围的框是透明的，但我的登录元素、标题和按钮却不是？

【问题讨论】：

你为什么不检查一下表单上的样式，看看它是如何完成的？
我在 Google 图片上找到了这张照片，并将其用于灵感。我想重新创建样式效果，但不幸的是不知道它来自哪个网站。

标签： css forms opacity styling

【解决方案1】：

使用background:rgba( 255, 255, 255, 0.3 ); 创建一个div，而不是简单地添加看起来像这样的输入：

.login_wrapper {
    width:300px;
    height:375px;
    background: rgba( 255, 255, 255, 0.3 );
    margin:0 auto;
}
.login_wrapper h1 {
    padding-top:30px;
    text-align:center;
    color:#fff;
}
.login_wrapper input[type=text] {
    width:80%;
    height: 25px;
    margin-left: 10%;
    margin-top: 10px;
}

body {
    height: 100%;
    width: 100%;
    background:url("https://unsplash.imgix.net/photo-1428591501234-1ffcb0d6871f?dpr=2&fit=crop&fm=jpg&q=75&w=1050");
    background-size:cover;
}

<div class="login_wrapper">
    <h1>Create Account</h1>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
</div>

我想你现在明白了。

【讨论】：

【解决方案2】：

您可以使用 rgba 设置背景 div 的不透明度。例如：

.form-container { background: rgba(0, 0, 0, 0.5); }

rgba的最后一个参数是alpha值，控制背景的透明度。

【讨论】：

【解决方案3】：

周围的框实际上并没有“透视” - 您会注意到它实际上包含页面背景图像的模糊版本以及变亮的效果。

我觉得以牺牲开发时间为代价实现这一目标的最佳方法是创建两个背景图像（页面的背景，以及 Photoshop 中相同的模糊、变亮版本）并设置background-image相应的元素。如果您正在做任何高级技巧，您可以使用 CSS 的新 calc 函数来帮助保持图像对齐。

更简单的方法是使用 CSS 的 blur 过滤器，尽管 Web 浏览器上的 CPU 密集程度更高，并且几年前的浏览器不支持。这记录在这里：How to apply a CSS 3 blur filter to a background image

【讨论】：

【解决方案4】：

我一直这样做的方式是......

<div class="overlay">
  <div class="overlay-content">
      <h2>Whatever</h2>
      <form><!-- foo --></form>
  </div>
</div>

.overlay-content 具有 bg 颜色（白色变亮，黑色变暗），例如 background-color: rgba(0,0,0,0.3); 具有透明度值。

【讨论】：