Question

我将opacity添加到我拥有的包裹中，使得我拥有input字段后面的背景。我只希望包装有opacity，但它也将它提供给所有输入。如何仅将opacity应用于输入的环绕？

我做了一个小提琴，以显示它的外观。

我为此div添加了不透明度：

.registerWrap {
    border-radius: 10px;
    border: 3px solid white;
    width: 45%;
    height: 500px;
    margin: 100px auto 40px auto;
    padding: 40px;
    text-align: center;
    background-color: #282828;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

＆＃13;

#wrap {
  background-color: gray;
}
.registerWrap {
  border-radius: 10px;
  border: 3px solid white;
  width: 45%;
  height: 500px;
  margin: 100px auto 40px auto;
  padding: 40px;
  text-align: center;
  background-color: #282828;
  opacity: 0.9;
  filter: alpha(opacity=90);
  /* For IE8 and earlier */
}
.inputbar[type=text] {
  display: block;
  width: 400px;
  margin: 10px auto;
  font-size: 18px;
  padding: 10px;
  -webkit-transition: all 0.40s ease-in-out;
  -moz-transition: all 0.40s ease-in-out;
  -ms-transition: all 0.40s ease-in-out;
  -o-transition: all 0.40s ease-in-out;
  outline: none;
  border: 1px solid #DDDDDD;
}
.inputbar:hover {
  -moz-box-shadow: 0 0 10px #ccc;
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}
.inputbar[type=text]:focus {
  border: 1px solid #800000;
  -moz-box-shadow: 0 0 1px 1px rgba(128, 0, 0, 1);
  -webkit-box-shadow: 0 0 1px 1px rgba(128, 0, 0, 1);
  box-shadow: 0 0 1px 1px rgba(128, 0, 0, 1);
}
#registerButton[type=submit] {
  margin: 15px auto;
  width: 425px;
  font-size: 20px;
  font-weight: bold;
  padding: 14px;
  cursor: pointer;
  background-color: #800000;
  border: none;
  color: #FFFFFF;
}
#registerButton[type=submit]:hover {
  -moz-box-shadow: 0 0 10px #ccc;
  -webkit-box-shadow: 0 0 10px #ccc;
  box-shadow: 0 0 10px #ccc;
}

＆＃13;

<div id="wrap">
  <div class="registerWrap">
    <form action="" method="POST">
      <input type="text" class="inputbar" name="firstname" placeholder="First Name" required>
      <input type="text" class="inputbar" name="lastname" placeholder="Last Name" required>
      <input type="email" class="inputbaremail" name="email" placeholder="Email" required>
      <input type="tel" class="inputbarphone" name="phone_number" placeholder="Cell Phone Number" required>
      <input type="text" class="inputbar" name="username" placeholder="Username" autocomplete="off" required>
      <input type="password" name="password" placeholder="Password" class="inputbarp" required>
      <input type="password" name="password_again" placeholder="Confirm Password" class="inputbarp" required>
      <label for="registerButton">
        <input id="registerButton" type="submit" name="submit" value="Register">
      </label>
    </form>
  </div>

＆＃13;

Answer 1

您实际上可以为rgba的{{1}}设置background-color颜色值，如下所示。值wrap只不过是您的十六进制颜色rgba(40, 40, 40, 0.9)的{{1}}等效项以及添加到元素中的rgb。

一个可能的缺点是#282828颜色值为not supported by IE8 and lower。如果您需要支持这些浏览器，那么此方法不适合您。

opacity

以下是一个示例代码段，其中包含图像作为换行的背景，以使效果更加明显。

＆＃13;

rgba

＆＃13;

.registerWrap {
    border-radius: 10px;
    border: 3px solid white;
    width: 45%;
    height: 500px;
    margin: 100px auto 40px auto;
    padding: 40px;
    text-align: center;
    background-color: rgba(40, 40, 40, 0.9);
    /* For IE8 and earlier */
}

＆＃13;

Answer 2

我更新了您的CSS（jsfiddle）：

context

我已添加：

context['title']

Answer 3

设置不透明度将影响所有子元素。相反，您可以设置背景颜色不透明度，如下所示：

background-color: rgba(40, 40, 40, .9); /* last value is opacity */

如何将不透明度添加到父div而不将其应用于子div

3 个答案: