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

图像伸展以填充父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，以便您了解会发生什么）

图像上的跨度叠加

1 个答案: