javascript - 在幻灯片上插入覆盖的 Div

Question

等等http://www.breastcanceranswers.com/news/我们在首页上有一个 slider 。

我想在图像上方但在文本下方放置一个 div。本质上，我想放置一个半透明的白色覆盖层来过滤 slider 上的图像，然后让文本保持原样，以便弹出更多内容。

我试过在每个 Angular 强制设置 div，看看我是否至少可以看到 div，然后希望将它放在正确的位置，但似乎没有任何效果。像往常一样，Stack Overflow 是我最后的选择 - 因为我讨厌在答案通常很容易时寻求帮助。

我的基本问题是:

1) 基于 View Source - 我是否遗漏了 div 应该放在哪里，您可以搜索 class="overlay"

2) 是否有更好的工具可以帮助我分离 div，以便我可以看到每个 div 的位置，然后尝试通过该路径插入？

欢迎提出任何问题，感谢任何帮助。谢谢

Answer 1

这有点像 hack，但我相信它完全符合您的要求。在你的里面<li class="clone" aria-hidden="true"...> , 添加以下 #white_overlay分区:

<li class="clone" aria-hidden="true"..>
    <div class="post-info"..>
        <div name="white_overlay" style="height: 200%; width: 800%; opacity: .5;background: white;position: absolute;z-index: 1;margin-top: -50px;margin-left: -80px;"></div>
        <div class="entry-meta"></div>
    </div>

然后添加这个额外的 css:

.entry-meta {
    position: relative;
    z-index: 2;
}

这基本上是通过创建一个不透明度为 50% 的白色 div 来实现的，给它 z-index=1将它移动到图像的“前面”，并给出 .entry-meta类 z-index=2将文本放在 #white_overlay 前面.高度、宽度和边距值是确保覆盖所有 5 个图像所必需的(尽管您可以根据需要调整这些值)，而位置值对于 z-index 值正常工作是必需的。关于 z-index 和堆栈上下文的主题有很多值得阅读的内容，但如果您需要更多信息，这里是一个很好的开始:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context?redirectlocale=en-US&redirectslug=Understanding_CSS_z-index%2FThe_stacking_context