Bagaimana untuk mencapai kesan ketelusan/legap imej dalam CSS

Ketelusan imej CSS dan kelegapan adalah salah satu teknik yang biasa digunakan dalam pembangunan web. Dengan memproses imej dengan ketelusan, anda boleh menjadikan tapak web anda lebih cantik dan profesional, serta meningkatkan kesan visual dan pengalaman pengguna tapak web anda. Dalam artikel ini, kami akan memperkenalkan secara terperinci cara mencapai kesan imej yang telus dan legap dalam CSS.

1. Pengenalan kepada ketelusan imej CSS

Ketelusan ialah sifat dalam CSS3 yang boleh menetapkan ketelusan elemen dan latar belakangnya untuk menunjukkan atau menyembunyikan elemen atau latar belakang. Ketelusan elemen boleh ditetapkan melalui sifat kelegapan, dan perlu diperhatikan bahawa ini boleh digunakan pada semua elemen, bukan hanya imej.

Nilai sifat ketelusan ialah nombor antara 0 (lutsinar sepenuhnya) dan 1 (legap sepenuhnya). Contohnya, jika anda menetapkan ketelusan imej kepada 0.5, imej tersebut akan mempunyai ketelusan 50%.

2. CSS untuk mencapai kesan ketelusan imej

1. Kita boleh menggunakan atribut kelegapan dalam CSS seperti berikut:

di mana 0 bermaksud telus sepenuhnya dan 1 bermaksud legap sepenuhnya. Kami juga boleh menyatakan ketelusan menggunakan peratusan. Sebagai contoh, 0.5 bermakna 50% ketelusan.

img{
    opacity:0.5; 
}

Kaedah ini berfungsi untuk semua latar belakang dan kandungan, serta boleh menjejaskan kelegapan latar belakang dengan meningkatkan kelegapan

.

background-color2. Gunakan unsur pseudo

Dalam contoh berikut, kami menggunakan elemen pseudo untuk mencapai ketelusan imej. Mula-mula kita menggunakan atribut

untuk meletakkan elemen induk secara relatif, kemudian gunakan

untuk meletakkan elemen pseudo secara mutlak ke bahagian atas elemen induk. Kami menambah atribut position:relative dan position:absolute pada elemen pseudo untuk menjadikan imej kelihatan separa lutsinar. background-coloropacity

3. Mod Penggabungjalinan

<style>
    .parent {
        position: relative;
        display: inline-block;
    }
    .parent::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000;
        opacity: 0.5;
        z-index: 1;
    }
    .parent img {
        position: relative;
        z-index: 2;
    }
</style>

<div class="parent">
    <img src="https://picsum.photos/200" alt="图片">
</div>

Mod pengadunan ialah sifat CSS yang mencipta kesan visual antara dua atau lebih lapisan. Gunakan atribut

untuk menggabungkan warna dua atau lebih lapisan bersama-sama untuk mencipta kesan visual. Terdapat banyak jenis mod adunan, seperti "darab", "skrin", "tindihan", "cahaya keras", dsb.

mix-blend-modeContohnya, campurkan imej latar depan ke dalam imej latar belakang:

4 Ketelusan dan kelas pseudo

<style>
    .parent {
        position: relative;
        display: inline-block;
    }
    .parent img {
        mix-blend-mode: multiply;
    }
</style>

<div class="parent">
    <img src="background.jpg" alt="背景图片">
    <img src="foreground.png" alt="前景图片">
</div>

Akhirnya, kita boleh mencapai output melalui pseudo-. kelas dan sifat ketelusan Beberapa kesan yang sangat bagus. Dalam contoh di bawah, kami menetapkan ketelusan kepada 0.8 dan kemudian menambah kelas pseudo hover untuk menukar nilai ketelusan. Ini akan menjadikan imej lebih jelas apabila tetikus dialihkan ke atasnya dan menjadi separa lutsinar apabila tetikus dialihkan.

3. Ringkasan

<style>
    .parent {
        position: relative;
        display: inline-block;
    }
    .parent img {
        opacity: 0.8;
        transition: opacity 0.3s ease-in-out;
    }
    .parent:hover img {
        opacity: 1;
    }
</style>

<div class="parent">
    <img src="https://picsum.photos/200" alt="图片">
</div>

Di atas ialah beberapa cara untuk mencapai kesan imej CSS yang telus dan legap. Teknik ini boleh digunakan untuk mencantikkan visual tapak web, meningkatkan pengalaman pengguna dan memberikan halaman web rupa dan rasa yang lebih profesional. Jika anda mahir dalam mereka, anda akan dapat menyediakan penyelesaian yang lebih fleksibel dan cekap untuk kerja pembangunan web anda.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan ketelusan/legap imej dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!