使用CSS的NVG效果

Question

我正在尝试使用 CSS 制作 NVG 效果，但我不知道从哪里开始以及如何添加发光和噪音效果以及所有这些东西。

如果有人知道任何提示或尝试过类似的事情，请指导我，谢谢 <3

Answer 1

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

实现不同的效果

   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;
}

Answer 2

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