get CSS inset box-shadow to appear on top of inner backgrounds

Question

I want a CSS inset box-shadow to appear on top of the elements inside of the container with the box-shadow, specifically background colors of child-elements.

Demo: http://jsfiddle.net/Q8n77/

<div class="parent">
    foo
    <div class="content">bar</div>
</div>

<style>
.parent {
    box-shadow : inset 0 0 5px 0 black;
}

.content {
    background : #EEE;
}
</style>

Any ideas? Can do whatever with the HTML, but need to be able to click-through, so no 100% width/height DIVs on top of everything.

Answer 1

If all you need is to have the inset shadow show through background colors, you can use transparent rgba (or hsla) colors rather than hex codes;

.parent {
    box-shadow: inset 0 0 5px 0 black;
}

.content {
    background-color: rgba(0, 0, 0, .2); /* .2 = 20% opacity */
}

Demo at http://jsfiddle.net/Q8n77/7/