使用CSS在圖像上添加紅點？

Question

我想知道是否可以創建一個CSS樣式，可以啓用一個小紅點顯示覆蓋圖像以表明它已被出售？

您可以使用CSS覆蓋另一個圖像上的透明圖像嗎？

Answer 1

是的，只要把它們一個接一個地做，然後在第二個上做一些像style="margin-top:-100px"的東西，將它移到前一個之上。

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

基本上，

HTML

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

CSS

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

Answer 4

此代碼在容器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>