2

背景画像に小さなドットを作成するためにa-webkit-maskと aを使用する特別なケースがあります。radial-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 に答える