使顶部div对页面透明，而其下的div不是

Question

基本上，我想要实现的是： http://i.imgur.com/ZDK3W9W.gif

正如你所看到的，弹出窗口有两个肾形状，它们被剥离以显示内容，但最初它们对网站的背景（文章等）是透明的。

我没有找到一种方法在CSS中做到这一点，（如果肾脏的顶层是透明的，但是底层是不透明的，它就不会起作用了。）

我的想法是通过动态创建背景图片来完成它，并在弹出窗口后呈现页面不可滚动，以便进行剥离效果。

我有什么遗漏，这可以帮助我更轻松地实现这一目标吗？ 感谢您的提示

Answer 1

element {
background-color:rgba(110, 110,110,.5);
}

/*the "a"means opacity and the number is from 0~1,also you can make img have opacity.*/


element {
background-color:rgb(110, 110,110,.5);
opacity:0.5;
}

opacity属性是0~1，你也可以让img有opacity.or你可以制作css动画关键帧。链接在这里 click here to check @keyframe

希望答案能够帮到你。

Answer 2

给子div一个绝对位置，并使用top，right，left和up css属性控制它的位置。

Position:absolute;
Top:300px;
Left: 50%;