Question

我有两张图片：

<img ng-src="image1.jpg" class="regular">
<img ng-src="image2.jpg" class="favorite">

对于第二张图片，我正在寻找一种方法来构建我的CSS类，使得标记/符号出现在图像上（例如，喜欢的星形或只是一个字母 - 可能是一幅图）。有办法吗？

Answer 1

由于<img>元素不能包含伪内容，因此您可以将其包装到标记中的<span>标记中，然后在其上应用伪内容。

.favorite {
    position: relative;
    display: inline-block;
}
.favorite:before {
    content: "\2605";
    position: absolute;
    left: 5px;
    top: 5px;
}

<span class="favorite"><img src="//dummyimage.com/100x100"/></span>

Answer 2

绝对位置有效。

尝试：

使用：

.regular {
 position: absolute;
    left: 0px;
}

.favorite {
 position: absolute;
 left: 100px;
 border: 1px solid black;
}

此处代码：https://jsfiddle.net/zyng2Lxj/

Answer 3

由于图像标记在伪元素之后不支持，所以如下的小jquery代码：

$(function() {

    $('.favorite').after('<img src="" class="icon" />');

});

此图片与此类的位置，如 FIDDLE

（所有归功于@Christopher Harris在Does :before not work on img elements?的答案）

CSS在元素上添加标记/符号

3 个答案: