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

display icons with black overlay on top right corner of image css

本文关键字：黑色 覆盖 图标 右上角 css 显示      更新时间：2023-09-26

我使用jquery灯箱滑块显示图像，灯箱滑块将图像动态插入灯箱容器。我想在图片上有一个心形图标，把它标记为最喜欢的。如何使用css来定位图像右上角有黑色覆盖的图标。提前感谢！

由于您还没有发布任何代码，下面是针对一般情况的基本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>

jsFiddle的现场演示。（我没有在imgur存储心脏，但+可以…）

相关文章：