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

P粉808697471 · Answer

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

P粉982881583 · Answer

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