CSSを使用したNVG効果

Question

CSS を使用して NVG エフェクトを作成しようとしていますが、どこから始めて、グローやノイズのエフェクトなどを追加する方法がわかりません。

誰かがヒントを知っているか、同様のことを試したことがある場合は、私を指導してください。ありがとうございます <3

P粉808697471 · Answer

ここに、あなたが試してみることができる質問への答えがあります。

さまざまな効果を実現

div{幅: 50vw; 高さ: 50vw; 背景画像: url(https://images.unsplash.com/photo-1671938576119-9e1c53d868dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80); / *写真アンスプラッシュより https:// unsplash.com/*/ 背景色: 緑; 背景ブレンドモード: オーバーレイ; }

P粉982881583 · Answer

「真の」赤外線の感触が必要な場合は、 画像の 色を反転し、 結果の彩度を下げる必要があります 。反転すると、オブジェクトが輝いて見えるようになります。これに緑の色合いを混ぜると、NVG が得られます。

div {
    背景色: 緑;
}
画像 {
    表示ブロック;
    幅: 100%;
    オブジェクトフィット: カバー;

    フィルター: 反転(100%) 飽和(0%);

    /* 親の背景とブレンドするには: */
    ミックスブレンドモード: 乗算;
}