得到CSS插入框阴影出现在内部背景的顶部 [英] get CSS inset box-shadow to appear on top of inner backgrounds

问题描述

我想要一个CSS插入框阴影出现在容器内的元素的顶部，使用box-shadow，特别是子元素的背景颜色。

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.

演示： 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>

任何想法？可以做任何与HTML，但需要能够点击，所以没有100％的宽度/高度DIVs的一切。

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.

推荐答案

如果您需要的是通过背景颜色显示插入阴影，则可以使用透明 rgba （or hsla）colors instead of hex code;

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 */
}

演示 http://jsfiddle.net/Q8n77/7/

这篇关于得到CSS插入框阴影出现在内部背景的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！