NVG-Effekte mit CSS

Question

Ich versuche, mithilfe von CSS einen NVG-Effekt zu erstellen, weiß aber nicht, wo ich anfangen soll und wie ich Leucht- und Rauscheffekte und all das Zeug hinzufügen soll.

Wenn jemand Tipps kennt oder etwas Ähnliches ausprobiert hat, helfen Sie mir bitte, danke <3

P粉808697471 · Answer

这是您可以尝试的问题的答案

实现不同的效果

   div{width: 50vw;
    height: 50vw;
    background-image: url(https://images.unsplash.com/photo-1671938576119-9e1c53d868dc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80); /*Photo From Unsplash https://unsplash.com/*/
    background-color: green;
    background-blend-mode: overlay;
}

P粉982881583 · Answer

如果您想要“真实”的红外感觉，您需要反转图像的颜色并对结果去饱和。反转会让人感觉物体在发光。将其与绿色阴影混合，您就得到了 NVG。

div {
    background-color: green;
}
img {
    display: block;
    width: 100%;
    object-fit: cover;

    filter: invert(100%) saturate(0%);

    /* To blend with parent background use: */
    mix-blend-mode: multiply;
}