首页  >  问答  >  正文

使用CSS的NVG效果

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

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

P粉832490510P粉832490510256 天前341

全部回复(2)我来回复

  • P粉808697471

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

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

    实现不同的效果

       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粉982881583

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

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

    回复
    0
  • 取消回复