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

Question

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

Answer 1

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

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

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

Answer 2

周围的盒子实际上并不是“透视” - 你会注意到它实际上包含了页面背景图像的模糊版本以及减轻效果。

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

更简单的方法，虽然在网络浏览器上占用大量CPU，而且几年前浏览器不支持，但使用CSS的calc过滤器。这在此处记录：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有一个bg颜色（白色为浅色，黑色为暗色），例如background-color: rgba(0,0,0,0.3);，具有透明度值。

Answer 4

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想你现在明白了。