html - Bootstrap contactForm 背景不透明度

Question

我有一个在 bootstrap 中制作的联系表。当我检查元素时，我发现它从 .well 类中获取 CSS 属性

在这个类中，背景颜色设置为:

background-color: #f5f5f5;

我修改为:

background-color: rgb(245,245,245);

这行得通。然后我想添加不透明度:

background-color: rgb(245,245,245,0.7);

背景变得完全透明。

但是如果我将不透明度设置为 0.7，那么整个联系表单就是半透明的。我怎样才能只有 contactForm bacground 半透明？

这是 contactForm html:

#contactForm.well {
  background-color: rgb(245,245,245,0.7);
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-sm-3">
  <!-- Form itself -->
  <form name="sentMessage" class="well" id="contactForm" novalidate>
    <legend>Formulaire de contact</legend>
    <div class="control-group">
      <div class="controls">
        <input type="text" class="form-control" placeholder="Votre nom" id="name" required data-validation-required-message="Veuillez entrer votre nom" />
        <p class="help-block"></p>
      </div>
    </div>
    <div class="control-group">
      <div class="controls">
        <input type="email" class="form-control" placeholder="Email" id="email" required data-validation-required-message="Veuillez entrer votre email" />
      </div>
    </div>

    <div class="control-group">
      <div class="controls">
        <textarea rows="10" cols="100" class="form-control" placeholder="Veuillez entrer votre message" id="message" required data-validation-required-message="Veuillez entrer votre message" minlength="5" data-validation-minlength-message="Min 5 characters" maxlength="999"
        style="resize:none"></textarea>
      </div>
    </div>

    <div id="success"></div>
    <!-- For success/fail messages -->
    <button type="submit" class="btn btn-primary pull-right">Envoyer</button>
    <br />
  </form>
</div>

Answer 1

在包含 alpha 值时需要使用 rgba()，尝试使用

background-color: rgba(245,245,245, 0.7);