Html 使用CSS在图像上应用效果

我有一张有很多细节的背景图片，我需要应用某种css/html过滤器来达到这个效果：

（左侧有图层效果，右侧没有） （示例应用于photoshop）

---

已尝试使用不透明度覆盖图像，但无法复制相同的内容。

该过滤器可以使用多重混合模式进行复制。要获得效果，请在覆盖元素上使用

mix-blend模式：multiply

，如下所示：

div{
位置：绝对位置；
宽度：100px；
高度：100px；
}
#第一组{
背景颜色：灰色；
边框：纯黑3px；
}
#第二组{
背景色：青色；
顶部：40px；
左：40px；
混合模式：倍增；
}

不确定您想做什么。你想从背景图像中提取颜色吗？我有一个带有背景图像的div。必须应用覆盖层div才能产生与示例图像左侧类似的效果。（图片的右侧是我目前为止没有任何效果的部分）非常感谢！！固定的