使用CSS的NVG效果-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

使用CSS的NVG效果

P粉832490510 2024-02-26 20:37:50

[CSS3讨论组]

615

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

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

P粉832490510

全部回复(2)

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

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

实现不同的效果

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

赞 +0

添加回复

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

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