CodePen

HTML

            
              <div class="parent" id="parent">

  <div class="child">
  </div>
  <p>The blue box and the text are child elements of the element that has a photo background. The child elements do not inerit the opacity setting on the parent. This is done using a jedi mind trick, aka "JavaScript".</p>
  
  <p>The rest of this is just filler text. Don't read this, you're just wasting your time. Are you serious? You're still reading? I'm not lying, this is just filler. I just need this to wrap below the box. That's all.</p>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * {
  box-sizing: border-box;  
}

.parent {
  width: 500px;
  background-image: url(http://www.impressivewebs.com/demo-files/css-opacity/bicycle.jpg);
  border: solid 3px black;
  margin: 0 auto;
  padding: 30px;
  opacity: .2;
	filter: alpha(opacity=20);
}
  
  .child {
    width: 150px;
    height: 150px;
    background: blue;
    float: left;
    margin: 0 20px 10px 0;
    border: solid 5px yellow;
    box-shadow: rgba(0, 0, 0, .2) 4px 4px 5px;
  }

p { margin: 0 0 20px 0; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
ThatsNotYoChild.js, by Louis Lazaris
Explanation: http://www.impressivewebs.com/fixing-parent-child-opacity/
This is a hacky workaround to let you use opacity on any element and prevent the child elements from inheriting the opacity.
Works in IE8+.
If anyone can get line 23 working in IE7, it will be fully cross-browser.
*/
function thatsNotYoChild(parentID) {

    var parent           = document.getElementById(parentID),
        children         = parent.innerHTML,
        wrappedChildren  = '<div id="children" class="children">' + children + '</div>',
        x, y, w, newParent, clonedChild, clonedChildOld;

    parent.innerHTML = wrappedChildren;
    clonedChild = document.getElementById('children').cloneNode(true);
    document.getElementById('children').id = 'children-old';
    clonedChildOld = document.getElementById('children-old');
    newParent = parent.parentNode;

    newParent.appendChild(clonedChild);
    clonedChildOld.style.opacity = '0';
    clonedChildOld.style.filter = 'alpha(opacity=0)';

    function doCoords () {
      x = clonedChildOld.getBoundingClientRect().left;
      y = clonedChildOld.getBoundingClientRect().top;
      if (clonedChildOld.getBoundingClientRect().width) {
        w = clonedChildOld.getBoundingClientRect().width; // for modern browsers
      } else {
        w = clonedChildOld.offsetWidth; // for oldIE
      }

      clonedChild.style.position = 'absolute';
      clonedChild.style.left = x + 'px';
      clonedChild.style.top = y + 'px';
      clonedChild.style.width = w + 'px';
    }

    window.onresize = function () {

      doCoords();

    };
  
    doCoords();

}

// call the function and pass the ID of the parent that has opacity set.
thatsNotYoChild('parent');
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................