链接与图片 - 如何显示上面的链接，图片链接的背景图片

所以我有一个图像链接：链接与图片 - 如何显示上面的链接，图片链接的背景图片

<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('../[email protected]'); 
    } 
</style>

的背景图像未被显示。如果我将链接图像的图像链接空白，我确实会看到背景，只是一旦链接图像可见，它就会阻止链接背景图像。

是我要去的可能吗？如果是这样，任何意见将不胜感激。

来源

2014-02-27 Tim Aych

你想显示两个图像，还是仅显示背景图像？ –

因为如果你删除'img'，你的'a'标签将没有'height'和'width'，因此它将失败... –

你试图把背景放在的顶部，如果位于具有背景的容器内，则不可能。如果你想达到同样的效果，你可以在不同的容器位置内完成两幅图像，然后你可以按照你想要的方式来安排它们。 – Alex

我做了一个工作例子给你：

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

来源

2014-02-27 17:39:20

背景图像是什么顾名思义 - 一个背景图像 - 因此它不能在元素的内容之上绘制。

查看您的代码我假设您想要在缩略图顶部显示播放按钮。我假设播放按钮是透明的。因为这对于::after伪元素正确位置和大小本身产生的基础

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('../[email protected]'); 
}

锚的相对定位是非常重要的：

我会用这个CSS。

否z-index是必需的::after伪元素位于文档流中的内容之后，因此通过上述CSS呈现在内容之上。

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

HTML很好，因为它是。

来源

2014-02-27 18:02:12

链接与图片 - 如何显示上面的链接，图片链接的背景图片

回答

相关问题