Question

所以在http://www.breastcanceranswers.com/news/上我们在首页上有一个滑块。

我试图在图像上放置div但在文本下面。基本上我想放一个半透明的白色叠加来过滤滑块上的图像，但是然后让文本保持原样，以便弹出更多。

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

我的基本问题是：

1）基于观察源 - 我错过了div应该去的地方，你可以搜索class =＆＃34; overlay＆＃34;

2）是否有更好的工具我可以使用它来帮助我分离div，这样我就可以看到每个的位置，然后尝试通过该路径插入？

欢迎任何问题，任何帮助表示赞赏。谢谢

Answer 1

我认为您需要提供.overlay类位置并强制它位于其父元素的顶部。这应该是一个开始。让我知道如何从这里帮助......

.overlay {
    background: rgba(255, 255, 255, .75);
    text-align: center;
    opacity: 1;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: absolute;
    top: 0px;
}

Answer 2

这有点像黑客，但我相信它正是你正在寻找的。在<li class="clone" aria-hidden="true"...>内，添加以下#white_overlay div：

<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

在幻灯片中插入重叠Div

2 个答案: