更新

Question

所以我要做的是在悬停时在图像上有一个SVG叠加层。最终我会为它设置动画，但是现在我只是想让叠加层工作。这就是我试过的：

<div class="centering margin-on-top">
   <img id="img1" src="media/circle-1.jpg" />
   <img id="img2" src="media/circle-2.jpg" />
   <img id="img3" src="media/circle-3.jpg" />
</div>

CSS：

#img1:hover {
    background: url("../svg/stroke-ears.svg") no-repeat;
}

起初我觉得它根本不起作用。但是当我把悬停放在包含的div而不是删除“inspect element”窗口中的图片时，svg就在那里，但隐藏在图像下面。

我有没有办法在图像或背景上设置z-index？

提前致谢。

Answer 1

将CSS更改为：

#img1 {
    position: relative;
}
#img1:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../svg/stroke-ears.svg") no-repeat;
}

您正在做的是创建一个覆盖在img之上的伪元素。您的原始img背景应用于img的背景而不是覆盖它。

这个新解决方案会在普通DOM之外创建一个元素，将您的img视为一个容器，并使用具有您想要应用的原始背景的元素覆盖其整个维度。

更新

JSFiddle example

所以，愚蠢的我，试图将img视为包含元素。这是修复。

<强> HTML

<div class="inline-container centering margin-on-top">
    <div class='img-holder'>
        <img id="img1" src="http://placehold.it/200x200" />
    </div>
    <div class='img-holder'>
        <img id="img2" src="http://placehold.it/200x200/FBC93D" />
    </div>
    <div class='img-holder'>
        <img id="img3" src="http://placehold.it/200x200/075883" />
    </div>
</div>

<强> CSS

.inline-container {
    font-size: 0;
}
.img-holder {
    position: relative;
    display: inline-block;
}
.img-holder:hover:after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
    background: url("http://placeskull.com/200/200") no-repeat;
}

如果您想缩短HTML，也可以轻松地将图像交换为新div上的背景图像。

图像下方的SVG背景

1 个答案:

更新

JSFiddle example