title: Child elements inheriting background color
body: <p>I am trying to make a <strong>simple parallax effect</strong>, however I also want to add a custom <strong>semi-transparent color</strong> to the background image.</p>
  
  <p>I tried many solutions, this one seemed to work however the color is applied <strong>on top</strong> of the children elements, even if I am using the <code>::before</code> selector.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.spannerBg {
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   background-color: rgba(255, 150, 0, 0.5);
   min-height: 300px;
  }
  
  .spannerBg::before {
   content: "";
   display: block !important;
   background-color: inherit;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
  }
  
  p {
    font-size: x-large;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="spannerBg" style="
      color: #fff;
      background-color: rgba(0, 0, 0, 0.5);
      background-image:url(https://images.pexels.com/photos/1051075/pexels-photo-1051075.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260)"&gt;
    
    &lt;p&gt;Somecontent&lt;/p&gt;
  
  &lt;/div&gt;
  &lt;div&gt;
    beiwrfa&lt;br&gt;ewnifiebfia&lt;br&gt;fbjwqbfwebfj&lt;br&gt;
  &lt;/div&gt;
  &lt;div class="spannerBg" style="
      background-image:url(https://images.pexels.com/photos/865711/pexels-photo-865711.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260)"&gt;
      &lt;p&gt;Somecontent&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;p&gt;somecontent&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I saw something about using semi-transparent pngs or fake div but I would like it to be 100% css.</p>
  
  <p>I also saw <a href="https://stackoverflow.com/questions/9182978/semi-transparent-color-layer-over-background-image">this question</a>, but all answers seem to either be not css or have the same problem</p>