CSS圖片黑色半透明是一種非常常見的效果，可以用來增強圖片的視覺效果，在網站或者設計中應用廣泛。下面通過代碼演示，簡要介紹一下如何用CSS實現圖片的黑色半透明效果。

.image {
position: relative;
display: inline-block;
}
.image:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0;
transition: opacity 0.5s ease;
}
.overlay p {
color: #ffffff;
font-size: 24px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="image"><img src="path/to/image.jpg" alt="image"><div class="overlay"><p>Your text here</p></div></div>

如上所示，首先使用position: relative;和display: inline-block;為圖片提供定位，讓其定位在父容器中。然后，添加:hover偽類，讓鼠標懸浮時顯示半透明效果。接著，使用position: absolute;和opacity: 0;為半透明層添加樣式，并利用opacity屬性控制透明度，同時設置transition屬性以實現平滑過渡。最后，添加文字樣式，并使用transform屬性使其在居中位置。

以上是通過CSS實現圖片黑色半透明的基本代碼，根據實際需求可以進行調整，例如改變半透明效果的顏色、透明度等。在實際應用中，請注意兼容性，以保證效果穩定可靠。