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

Question

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

Answer 1

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

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

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

Answer 2

周围的框实际上不是 "see through" - 您会注意到它实际上包含页面背景图像的模糊版本以及变亮的效果。

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

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

Answer 3

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

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

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

Answer 4

用 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>

我想你现在明白了。

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

How do I recreate a web form like this without reducing the opacity of form elements?

css

forms

styling

opacity