ホームページ  >  に質問  >  本文

CSSを使用したNVG効果

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

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

P粉832490510P粉832490510256日前346

全員に返信(2)返信します

  • P粉808697471

    P粉8086974712024-02-27 14:20:16

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

    さまざまな効果を実現

    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/*/ 背景色: 緑; 背景ブレンドモード: オーバーレイ; }

    返事
    0
  • P粉982881583

    P粉9828815832024-02-27 10:59:45

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

    div {
        背景色: 緑;
    }
    画像 {
        表示ブロック;
        幅: 100%;
        オブジェクトフィット: カバー;
    
        フィルター: 反転(100%) 飽和(0%);
    
        /* 親の背景とブレンドするには: */
        ミックスブレンドモード: 乗算;
    }

    返事
    0
  • キャンセル返事