Question

我正在使用jquery灯箱滑块显示图像，灯箱滑块动态地将图像插入灯箱容器中。我想在图像上有一个心形图标来标记它是最喜欢的。我怎么能用css在图像的右上角定位带有黑色覆盖图标的图标。提前谢谢！

Answer 1

由于您尚未发布任何代码，因此这里是一般情况的基本CSS和HTML。

CSS：

.sliderImgWrapper {
    position: relative;
    width: 200px;
    height: 300px;
    border: 2px solid #000000;
}
.overlay {
    position: absolute;
    top: 0px;
    right: 0px;
    border-top: 50px solid #000000;
    border-left: 50px solid transparent;
}
.overlayImage {
    position: absolute;
    top: -50px;
    left: -25px;
}

HTML：

<div class="sliderImgWrapper">
    <div class="overlay">
        <img class="overlayImage" src="src_of_img" />
    </div>
</div>

A live demo at jsFiddle。（我没有将心存储在imgur，但是+会做...）

在图像css的右上角显示带有黑色覆盖图标的图标

1 个答案: