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

问题描述

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

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

 < div class =parent> 
 foo 
< div class =content>栏< / div> 
< / div> 
 
< style> 
 .parent {
 box-shadow：inset 0 0 5px 0 black; 
} 
 
 .content {
 background：#EEE; 
} 
< / style> 
  

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

解决方案

如果您需要的是通过背景颜色显示插入阴影，则可以使用透明 .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/

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/

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