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的遮罩层，并且将其背景颜色设为半透明的黑色，从而实现了图片变暗的效果。通过控制遮罩层的不透明度，可以实现不同的效果。