有没有办法从样式中排除单个元素？ （引导）

Question

所以，我有一个img徽标，覆盖在div样式background-image: url("...")上，两个元素都位于2 div内，类.to-color和分别为.to-overlay，以获得黑色透明叠加效果。

有没有办法从这两个类中给出的样式中排除徽标？

这是一个JSFiddle示例：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及其所有孩子半透明。

不要让.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);
}

以下是示例：https://jsfiddle.net/qet75juc/2/