スタイルから1つの要素を除外する方法はありますか？ （ブートストラップ）

Question

だから、私はbackground-image: url("...")でスタイルdiv上にオーバーレイimgロゴを、持っている、との両方の要素が黒い透明オーバーレイを取得するには、それぞれ内側に2 divクラス.to-colorと.to-overlayとしています。

これらの2つのクラスから与えられたスタイルからロゴを除外する方法はありますか？例からLink

HTMLとCSS：：

- HTML - 

<div class="to-color"> 
<div class="to-overlay"> 

<div class="respo"> 
    <div class="row"> 
    <div class="col-xs-4 col-xs-offset-4 text-center"> 
    <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> 
    </div> 
    </div> 
</div> 

</div> 
</div>  


- CSS - 

.to-color { 
background-color: #000; 
} 

.to-overlay { 
opacity : 0.5; 
} 

.respo { 
background-image: url("https://source.unsplash.com/category/objects/1600x900"); 
background-position: center center; 
background-size: cover; 
padding-top: 10%; 
padding-bottom: 20%; 
} 

Answer 1

何が間違ってやっていることは、半不透明.to-overlayとそのすべての子を作っている。ここ

はJSFiddle例です。

.to-overlay自体を半不透明にする代わりに、の前に表示される擬似要素を使用して、のロゴを半透明にします。ここで

.to-color { 
    background-color: #000; 
    position: relative; 
} 

.to-overlay:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.5); 
} 

は例です：あなたがロゴにCSSクラスを与える必要があるでしょうhttps://jsfiddle.net/qet75juc/2/