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 の status 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"、2 番目のもののように前のものの上に移動します。

Answer 4

基本的、

HTML

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

CSS

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