2

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

现在出现了每个点中的颜色都有渐变的情况。

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

所以我想要的是当我有一个带有蓝色阴影的点时，我想应用一个只显示纯蓝色的过滤器。

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

在此处输入图像描述

在不为每个点添加单独的 div 并手动设置 CSS 背景颜色的情况下，这是否可以使用 CSS？还是我需要使用 WebGL？

4

1 回答 1

0

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

在此演示中，基本元素具有渐变。覆盖消除亮度变化，应用覆盖亮度

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;
}
<div class="base"></div>
<div class="overlay"></div>

于 2015-04-12T11:40:58.733 回答