透明な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

を試してみてください。

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>

Answer 2

opacityがparent elementそれでも効果それはchild elementsだので、私はあなたがrgbaとしてbackgroundを使用すると、以下のように、親と子のdivの両方からopacityを削除することをお勧めで使用されている場合は、この

.covered-container { 
    background-color: rgba(255,255,255,0.7); 
    margin-bottom: 20px; 
}