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

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/