css框阴影,当父div具有背景时不工作

时间:2015-03-05 07:45:05

标签: html css css3

我遇到了麻烦,我正在尝试为我的盒子放置弯曲的阴影,它正确显示,但如果我将背景颜色添加到父元素,它将无法显示。

这是fiddle

请看一下,尝试删除“.parent”的背景颜色,你可以看到我想要做的事情。 提前致谢

4 个答案:

答案 0 :(得分:1)

问题是由于阴影的z-index为-1,这意味着父div将位于阴影的前面。因此,如果父级具有不透明的背景,则它将覆盖阴影。您应该为父项指定小于-1的z-index。

.parent{background-color:#eee; position:relative; width:100%; height:300px; z-index: -2}

答案 1 :(得分:1)

阴影位于.parent元素下(由于负z-index)。然后,如果你将背景放在更高级别的元素中,那么你只看到这个背景是正常的。

将父母置于阴影之下,它将起作用。

.parent {z-index: -2}  

https://jsfiddle.net/jfy4ss3p/2/

答案 2 :(得分:1)

.parent
{
z-index:0;
}

Check Demo here

答案 3 :(得分:0)

它在删除父http://prntscr.com/6cwlkj

背景时正在工作