CSS圖片的遮蓋層是一個非常有用的效果，可以讓圖片變得更加鮮艷，更加吸引人。以下是一個簡單的例子：

.image-container {
position: relative;
display: inline-block;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.image-container:hover .image-overlay {
opacity: 1;
}

在上述代碼中，我們創建了一個圖像容器，然后給這個容器添加了一個相對定位。接下來，在這個容器中添加了一個絕對定位的遮蓋層。我們將這個遮蓋層的背景顏色設置為黑色，并使用了alpha透明度來讓它半透明。此外，我們還添加了一個0秒的過渡效果，用于在鼠標懸停時改變遮蓋層的透明度。

當鼠標懸停在圖像上時，遮蓋層將完全顯示，覆蓋整個圖像。這將在視覺上讓圖像看起來更加明亮、清晰和有吸引力。

可以根據需要修改遮蓋層的樣式，例如改變顏色、透明度或過渡時間。這個技術還可以與其他CSS屬性一起使用，例如文本陰影或邊框。