Css 带彩色剪切的灰度图像

是否可以使用css调整灰度图像，并在特定位置制作包含原始颜色的剪切？类似于所附图像上的内容。。

---

使用伪元素和剪辑路径，您可以执行以下操作：

.box{
高度：300px；
位置：相对位置；
}
.box：：之前，
.box：：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：url(https://picsum.photos/id/127/800/800)中心/盖；
}
.box：：之前{
过滤器：灰度（1）；/*带有过滤器的底层*/
}
.box：：之后{
剪辑路径：插入（20%50px 50px 50%）；/*顶层剪辑*/
/*（左上右下）*/
}

---

这里是另一种不用伪元素但借助属性的方法：

.image容器{
位置：相对位置；
显示：内联块；
}
.图像灰色{
显示：块；
滤镜：灰度（100%）；
}
.图像颜色{
位置：绝对位置；
顶部：0px；
剪辑：矩形（50px，250px，200px，150px）；
}

---

我为您提供了一种无图像复制的解决方案。另一个解决方案是使用不推荐使用的clip（clip路径应该像我一样使用）