CSS 圖片加黑色遮罩有多種實現方法，例如使用opacity屬性、使用background-color實現以及使用rgba實現。這里我們將介紹一種簡單而有效的實現方法。

/* HTML 代碼 */ <div class="img-container"> <img src="example.jpg" alt="Example"> </div>
/* CSS 代碼 */ .img-container { position: relative; } .img-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1; }
.img-container img { position: relative; z-index: 2; }

這里我們使用偽元素::before實現遮罩效果。通過設置該元素的屬性，使其在圖片上方形成一層黑色半透明遮罩。同時，我們將圖片的z-index屬性設置為更高的值，以使其出現在遮罩上方。

這種實現方法簡單易懂，適用于大多數情況。同時，我們也可以通過細微調整，實現更加精細的效果。