CodePen

HTML

            
              <div id="alpha_100">
<div class="text_holder">
    <p>Demo text 1</p>
</div>
</div>
<div id="alpha_30">
<div class="text_holder">
    <p>Demo text 2</p>
</div>
</div>
<div id="alpha_30">
<div class="text_holder">
    <p>Demo text 3</p>
</div>
<div id="text_holder2">
    <p>Demo text 4</p>
</div>
</div>
<div class="bg-img">
  <p class="text_holder"> some text</p>
</div>
            
          
!

CSS

            
              
.text_holder {
  background:rgba(0, 0, 255,1);
  width: 500px;
  height: 200px;
  border:solid;
}
#text_holder2 {
  width: 500px;
  height: 200px;
  color: rgba(255, 255, 0, 1);
}

#alpha_30 > div {
  /*opacity: 0.3;*/
  background:rgba(0, 0, 255,0.3);
  color: #ff0000;
}
#alpha_100 {
  color: #ff0000;
}

.bg-img {
  background:url(http://lorempixel.com/100/100/abstract);
}
.bg-img .text_holder {
  background:rgba(255,255,255,0.7);
  }

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................