Kesan NVG menggunakan CSS

Question

Saya cuba membuat kesan NVG menggunakan CSS tetapi saya tidak tahu di mana hendak bermula dan cara menambah kesan cahaya dan hingar serta semua perkara itu.

Jika sesiapa tahu apa-apa petua atau pernah mencuba sesuatu yang serupa sila tunjuk ajar saya, terima kasih <3

Answer 1

Berikut adalah jawapan kepada soalan yang anda boleh cuba

Mencapai kesan yang berbeza

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

Answer 2

Jika anda mahukan rasa inframerah "sebenar", anda perlu terbalikkan warna imej dan mencairkan hasilnya. Penyongsangan menjadikan objek kelihatan bercahaya. Campurkan itu dengan warna hijau dan anda mendapat 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;
}