html - 为什么透明 div 上的输入也呈现为透明？

Question

我有一个透明的白色 div，我想在其中放置一个输入。无论出于何种原因，输入和按钮也呈现为透明。

HTML:

<div class="covered">
  <div class="container covered-container">
    <div class="col-md-12 infotron-home"><div class="input-group">
            <input type="text" class="form-control" placeholder="Search for...">
            <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
        </div> </div>
  </div>
</div>

CSS:

div.covered{
  background: url(http://i2.cdn.cnn.com/cnnnext/dam/assets/140801145902-irpt-birds-heron-scott-baumann-horizontal-large-gallery.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 80%;
  padding-top:50px
}
.covered-container{
  background-color:white;
  opacity: .7;
  margin-bottom:20px;
}


.infotron-home{
  margin-top:50px;
text-align: center;
font-family: "Roboto Slab";
color:#0c5449;
}

.infotron-home li, .infotron-home p{
  list-style-type: none;
  font-family:Helvetica, Arial, sans-serif;
  font-size:18px;
}


.search-home{
  width:80%;
  opacity: 1;
}

input, select, textarea{
  color: #ffffff !important;
  opacity: 1;
}

JsFiddle:https://jsfiddle.net/49fp9ngk/1/

如何使输入像默认值一样不透明和白色？

Answer 1

当 opacity 用于 parent element 时，它甚至影响它的 child elements，所以我建议你使用 background 作为 rgba 并从父 div 和子 div 中删除 opacity，如下所示。

div.covered{
  background: url(http://i2.cdn.cnn.com/cnnnext/dam/assets/140801145902-irpt-birds-heron-scott-baumann-horizontal-large-gallery.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 80%;
  padding-top:50px;
}
.covered-container{
  background-color:rgba(255,255,255,0.7); /* Add this */
  margin-bottom:20px;
}


.infotron-home{
margin-top:50px;
text-align: center;
font-family: "Roboto Slab";
color:#0c5449;
}

.infotron-home li, .infotron-home p{
  list-style-type: none;
  font-family:Helvetica, Arial, sans-serif;
  font-size:18px;
}

.search-home{
  width:80%;
  opacity: 1;
}

input, select, textarea{
  background:rgba(255,255,255,1); /* Add this */
}

<div class="covered">
    <div class="container covered-container">
        <div class="col-md-12 infotron-home"><div class="input-group">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
     </div><!-- /input-group --> </div>
  </div>
</div>