使用CSS在图片上添加红点？

Question

我想知道是否有可能创建一个CSS样式，使得一个小红点能够覆盖在图片上面，以表示该商品已售出？

你能否使用CSS将一个透明的图像覆盖在另一张图片上面？

- user2939544

Answer 1

这段代码会在容器

上生成一个红点：

#cont {
        width: 200px;
        height: 200px;
        border: 1px solid #aaa; /*To show the boundaries of the element*/
    }
    #cont:before {
        position: absolute;
        content: '';
        background-color:#FF0000;
        border-radius:50%;
        opacity:0.5;
        width: 200px;
        height: 200px;
        pointer-events: none;
    }

<div id="cont">
<img src="" alt="image here" width="200" height="200">
</div>

- bitoffdev

Answer 2

你最好的选择是创建另一个元素（div）来显示物品的状态。如果该物品已售出，则在该物品上设置已售出的类。然后在CSS中使用border-radius在状态div上创建红色圆点。

示例：

.sold .status{
  border-radius: 5px;
  background: #f00;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 5px;
  right: 5px;
}

- Sir Kettle

Answer 3

基本上， HTML

<ul>
    <li></li>
</ul>

CSS

ul::marker 
{
list-style-type: circle;
position:absolute;
}
li{
color: red;
}

- Shivanshu

Answer 4

是的，只需将它们一个接一个地放置，并在第二个上使用类似于style="margin-top:-100px"的东西将其移动到前一个上方。

- AwokeKnowing

---

谢谢AwokeKnowing - 我不想再制作另一张图片，只想在某些东西被售出时叠加这个红点。 - user2939544