Question

好吧，我试图通过使用CSS在另一个图像上显示一个小徽标图像（默认情况下在所有图像上），但不知何故没有显示。这是我使用的CSS

img:after
{
    content: '';
    display: inline-block;
    position: absolute;
    width: 48px;
    height: 48px;
    top: 40px;
    left: 40px;
z-index: 1px;
    background: url(http://dl.dropbox.com/u/51558405/small.png) no-repeat;
}

我尝试这样做的图像是标准的640x360尺寸。我认为使用z索引组件为背景图像可能会在前面得到它但没有用。由于我希望默认情况下对所有图像执行此操作，因此我无法手动编辑html，因此有没有办法在不编辑html和CSS或脚本的情况下执行此操作？

Answer 1

伪元素不适用于img标记。

请参阅此问题/答案：Why don't :before and :after pseudo elements work with `img` elements?

Answer 2

您可以将带有img标签的伪元素用作evu指出，但您可以将图像标记包装在元素中并将伪元素应用于包装元素。 FIDDLE

<a href="#" class="image"><img src="http://placehold.it/250X250"/></a>

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

a.image:after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 48px;
    height: 48px;
    top: 40px;
    left: 40px;
    z-index: 1px;
    background: url(http://dl.dropbox.com/u/51558405/small.png) no-repeat;
}

Answer 3

我认为你想要的是这样的：http://jsfiddle.net/4Z7H3/2/

Trick是使用position relative和absolute来创建效果：使用一个位置相对的包装器，你可以在该元素上绝对定位元素。

HTML：

<div class="wrapper">
    <img class="bg-image" src="http://placehold.it/300x200" alt="">
    <a href="http://what.ever"><img class="logo" src="http://placehold.it/100x100" alt=""></a>
</div>

的CSS：

.wrapper { overflow: hidden; position: relative; }
.logo { position: absolute; top: 0; left: 0; border: 1px solid red; }

无法使用CSS在另一个图像上添加图像

3 个答案: