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;
}

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

4 个答案: