Javascript 使上面的div对页面透明，而下面的div则不透明

基本上，我试图实现的是：

如您所见，弹出窗口有两个肾形，它们被剥去以显示内容，但最初它们对网站背景（文章等）是透明的

我没有在CSS中找到这样做的方法（如果肾脏的顶层是透明的，但底层不是，那么它就不起作用）

我的想法是通过动态创建一个背景图像，并在弹出窗口出现时使页面不可滚动，从而实现剥离效果

是否有什么东西我遗漏了，可以帮助我更容易地做到这一点？ 谢谢你的提示

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;
}

不透明度属性从0到1，您也可以使img具有不透明度。或者您可以使css动画关键帧。链接在这里

---

希望答案能对您有所帮助。

为子div指定一个绝对位置，并使用top、right、left和up css属性控制其位置

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

---

只需将

div

放在您想要的位置，给它们

opacity:0；显示：无

，当您希望它们出现时，将值更改为

不透明度：1；显示：不允许实现剥离动画效果的块

。因为它将剥离一个层（例如在这个链接上），所以将有2个绝对div。下面的一个应该有内容，但是如果它有内容，它应该是隐藏的，但是顶层应该从底层剥离，同时对页面背景透明。哦，好的，我现在更了解你的情况了不幸的是，这一点都没有帮助。但是谢谢你的努力！谢谢，但这是任何可能的解决方案中显而易见的一步，与实际问题相关。不幸的是，没有帮助。那么，我可能还没有明白你的问题，无论如何，我建议使用java脚本插入或删除元素，而不是使用css显示和隐藏它们，希望这会有所帮助。