在網上商城中，經常需要在商品圖片上顯示相應的價格，這樣可以讓消費者更加方便地了解商品的價格信息。在使用 CSS 實現這一功能時，可以利用偽元素和絕對定位的方式實現，下面我們來看看具體的代碼實現。

/*html部分*/
<div class="product">
<img src="product.jpg" alt="商品圖片">
<span class="price">$19.99</span>
</div>
/*CSS部分*/
.product{ 
position: relative; /*相對定位*/ 
display: inline-block; 
margin-right: 20px; 
} 
.price{
position: absolute; /*絕對定位*/
bottom: 0; 
left: 0; 
width: 100%; 
padding: 10px 0; 
text-align: center; 
font-size: 20px; 
color: #fff; 
background-color: rgba(0,0,0,0.8);
} 
.product:hover .price{
opacity: 1; /*鼠標滑過時價格顯示*/ 
}
.price::before{
content: ""; /*內容為空*/
position: absolute; /*絕對定位*/
top: 100%; 
left: 50%; 
margin-left: -10px; /*箭頭位置調整*/ 
border-top: 10px solid rgba(0,0,0,0.8);
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}

以上便是利用 CSS 實現在商品圖片上顯示相應價格的方法，可以通過修改樣式的方式來修改價格的樣式，達到更好地美化效果。