在網頁設計中經常會用到圖片，但是有時候我們希望圖片有一個黑色的半透明背景，這樣就可以讓圖片更加突出，同時也符合設計的美感要求。那么接下來我將介紹如何使用 CSS 來實現這種效果。

.img-container {
position: relative;
}
.img-container::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
background-color: black;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
}
.img-container img {
position: relative;
z-index: 2;
}

首先我們需要一個包含圖片的容器，可以使用一個 div 或者其他的標簽來包裹圖片。我們需要給這個容器一個相對定位的樣式。

然后我們使用偽元素 ::before 來創建一個黑色的背景層，也需要添加絕對定位。這個層會覆蓋在圖片的上層，從而實現半透明背景的效果。我們通過設置這個層的背景顏色、寬度、高度、透明度以及 z-index 來控制它的顯示效果。

最后我們把圖片的 z-index 設為比背景層大，從而讓圖片顯示在背景層的上方。

以上就是使用 CSS 實現圖片半透明黑色背景的方法，相信你已經學會了。如果你想要實現更加復雜的圖片效果，可以繼續深入學習 CSS 的相關知識，相信這將會擴展你在網頁設計中的創造力。