使用CSS的NVG效果

Question

我正在尝试使用CSS制作NVG效果，但我不知道从哪里开始以及如何添加发光和噪音效果以及所有这些东西。如果有人知道任何提示或尝试过类似的事情，请指导我，谢谢<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;
}