如何围绕具有不透明背景的表单？

Question

我有一个包含此代码的表单：

<form class="form-inline">

  <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label">Mail</label>
      <input type="email" value='' id="name" placeholder="Email">
  </div>

  <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label">Pass</label>
      <input type="password" value='' id="name" placeholder="Password">
  </div>

  <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label"></label>
      <button type="submit" class="btn btn-default">Log In</button>
  </div>

</form>

看起来像这样：

但我想用不透明/透明的书写颜色包围它（说还有一个bakground图像）。为了让您更好地了解我需要的是一个例子：

谢谢。

Answer 1

使用带RGBA的背景颜色，如下所示

    #form_container {
        background-color: rgba(255, 255, 255, 0.3);
    }

并将背景图像应用于父级，例如：

body {
   background-image: url('NiceBackground.png');
}

Answer 2

body {
  background: url('https://www.w3schools.com/css/trolltunga.jpg');
}

.form-inline {
  background: rgba(255, 255, 255, 0.54);
}

.form-inline>div {
  display: inline-block;
  padding: 40px 10px;
  width: 137px;
  overflow: hidden;
}

<form class="form-inline">

  <div class="form-group col-xs-2 col-md-2">
    <label for="name" class="control-label">Mail</label>
    <input type="email" value='' id="name" placeholder="Email">
  </div>

  <div class="form-group col-xs-2 col-md-2">
    <label for="name" class="control-label">Pass</label>
    <input type="password" value='' id="name" placeholder="Password">
  </div>

  <div class="form-group col-xs-2 col-md-2">
    <label for="name" class="control-label"></label>
    <button type="submit" class="btn btn-default">Log In</button>
  </div>

</form>

Answer 3

您可以为表单添加填充以增加宽度和高度。然后给它一个透明的白色背景。 见下面的样本

.form-inline {
    background-color: rgba(255,255,255,0.3);
    padding: 20px;
}

以上问题是正确的。添加填充