Question

所以我有一个图片链接：

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">
    <img src="../gs1.jpg" alt="YouTube" />
</a>

并且链接有背景图片：

<style>
    a {
        z-index: 99999;
        background-image:url('../play-button-red@40.png');
    }
</style>

未显示背景图像。如果我删除了链接图像的图像网址，我确实看到了背景，只有链接图像可见后才会阻挡链接背景图像。

我的目标是什么？如果是这样，任何建议将不胜感激。

Answer 1

背景图片就是名称所暗示的 - 背景图片 - 因此无法在元素的内容之上绘制。

查看代码我假设您要在缩略图顶部显示播放按钮。我假设播放按钮是透明的。

我会使用这个CSS：

a {
    display: inline-block;
    position: relative;
}

a:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url('../play-button-red@40.png');
}

锚点的相对定位非常重要，因为这会为::after伪元素生成正确定位和调整大小的基础。

不需要z-index，因为::after伪元素位于文档流中的内容之后，因此使用上述CSS呈现在内容之上。

我强烈建议将类分配给有问题的主持人，因为您希望在文档中显示每个a的播放图像是值得怀疑的。

HTML很好。

Answer 2

我为你做了一个有效的例子：

HTML：

<a href="#">
    <img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/social_4-128.png" alt="YouTube" />
</a>

CSS：

a {
    width: 200px;
    height: 200px;
    display: block;
    z-index: 99999;
    background:#000 url('http://jsfiddle.net/img/logo-white.png');
}

<强> FIDDLE

链接图像 - 如何在链接图像上方显示链接的背景图像

2 个答案: