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

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.

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/

Not everyone has the ability to change HTML structure. If you can only access the CSS, you could try the following from this post: https://stackoverflow.com/a/13188894/491044

Alternatively, you can use a pseudo element:

HTML:

<div>
    a
</div>​

CSS:

div {
    height:300px;
    color:red;
    position:relative;
}

div:before {
    content:'';
    display:block;
    box-shadow:inset 0 0 10px black;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}​

One possibility is to play with the padding.

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

http://jsfiddle.net/jasongennaro/Q8n77/6/

you could try to position an overlay div on top of your parent with position: absolute; and give that the shadow (untested theory) with something like this:

HTML

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

CSS

.parent {  
    position: relative;
}

.content {
    background : #EEE;
}

.parent .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow : inset 0 0 5px 0 black;
}