html - 跨度叠加在图像上

Question

我试图在悬停时显示图像上的叠加层。这是我的代码的一部分:

        <div class="wrapper-showcase">
            <div class="first">
                <img src="showcase-1.png" />
                <span class="overlay"></span>
            </div>
            ...
        </div>

这是 CSS:

                .wrapper-showcase div.first img {
                    width: 100%;
                    height: 100%;
                    z-index: -100;
                }

                .wrapper-showcase div.first span {
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,0.3);
                    display: inline-block;
                    left: 0;
                    top: -50%;
                    z-index: 100;
                }

图像正在拉伸(stretch)以填充父 div，但我想要显示的跨度没有显示出来。它显示在上述图像下方。有什么方法可以覆盖它们吗？

Answer 1

working demo 我补充说:

.first{
position:relative;
}

我改变了跨度

.wrapper-showcase div.first span {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    display: inline-block;
    left: 0;
    z-index: 100;
    background-color:moccasin;
    position:absolute;
    top:0;
}

(我还添加了 background-color:moccasin 这样你就可以看到发生了什么)