是否有CSS3过滤器将渐变颜色转换为纯色

Question

我有一个特殊情况，我使用-webkit-mask和radial-gradient在背景图片上创建小点。这些点的颜色为transparent，因此可以在点内看到背景图片。

现在存在每个点中的颜色具有渐变的情况。

是否有可能检测每个点的平均颜色并应用显示纯色的CSS滤镜？

所以我想要的是当我有一个蓝色阴影的点，然后我想应用一个只显示纯蓝色的滤镜。

以下是此类案例的屏幕截图：

这是否可以使用CSS而不为每个点添加单独的div并手动设置CSS背景颜色？或者我需要使用WebGL吗？

Answer 1

使用混合属性，您只能使用底层div的色调值

在此演示中，基本元素具有渐变。叠加层会消除亮度的变化，应用叠加亮度

＆＃13;

＆＃13;

div {
    height: 200px;
}
.base {
    width: 300px;
    background-image: linear-gradient(hsl(120, 50%, 60%),hsl(120, 100%, 90%));
}
.overlay {
   position: absolute;
    width: 100px;
    left: 100px;
    top: 10px;
    z-index: 2;
    border: solid 1px black;
    background-color: gray;
    mix-blend-mode: luminosity;
}

＆＃13;

<div class="base"></div>
<div class="overlay"></div>

＆＃13;

＆＃13;

＆＃13;