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