使用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=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx1wxM ; /*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;
}