css - 使用 CSS 在图像上添加红点？

Question

我想知道是否有可能创建一个 CSS 样式，可以使一个小红点显示在图像上以表明它已售出？

您可以使用 CSS 将透明图像覆盖在另一个图像上吗？

Answer 1

此代码在容器上生成一个红点div：

#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>

Answer 2

您最好的选择是为项目的状态创建另一个元素 (div)。如果物品已售出，请在要出售的物品上设置一个类别。然后在 CSS 中的状态 div 上使用border-radius 来创建红点。

例子：

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

Answer 3

是的，只需将它们一个接一个地放置，然后style="margin-top:-100px"在第二个上执行类似操作，将其移动到前一个之上。

Answer 4

基本上，

HTML

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

CSS

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