CSS中經常會用到圖片作為背景或者輔助元素，但有時候需要對圖片進行處理，使其變暗，例如用于背景陰影或者hover效果等。

/* 在CSS中使用filter屬性可以對圖片進行多種處理，其中包括改變亮度、對比度、模糊、反轉等 */
.bg-image {
background-image: url('example.png');
filter: brightness(50%);
}

在上面的例子中，使用brightness屬性將圖片的亮度降低50%，從而實現了圖片變暗的效果。除了brightness屬性，還可以使用opacity、saturate、contrast等屬性對圖片進行不同的處理，以實現不同的效果。

需要注意的是，filter屬性在一些較老的瀏覽器中可能不被支持，可以通過前綴的方式進行兼容，例如：

.bg-image {
background-image: url('example.png');
-webkit-filter: brightness(50%);
filter: brightness(50%);
}

除了使用filter屬性，還可以通過使用半透明的遮罩層來實現圖片變暗的效果。具體實現方式可以參考以下代碼：

.bg-image {
background-image: url('example.png');
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

在上面的代碼中，我們通過添加一個position為absolute的遮罩層，并且將其背景顏色設為半透明的黑色，從而實現了圖片變暗的效果。通過控制遮罩層的不透明度，可以實現不同的效果。