Rumah hujung hadapan web Soal Jawab bahagian hadapan Bagaimana untuk mencapai kesan ketelusan/legap imej dalam CSS

Bagaimana untuk mencapai kesan ketelusan/legap imej dalam CSS

Apr 24, 2023 pm 02:47 PM

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; 
}
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Terangkan konsep pemuatan malas. Terangkan konsep pemuatan malas. Mar 13, 2025 pm 07:47 PM

Terangkan konsep pemuatan malas.

Bagaimanakah algoritma Rekonsiliasi React berfungsi? Bagaimanakah algoritma Rekonsiliasi React berfungsi? Mar 18, 2025 pm 01:58 PM

Bagaimanakah algoritma Rekonsiliasi React berfungsi?

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan? Mar 19, 2025 pm 03:58 PM

Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?

Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya? Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya? Mar 18, 2025 pm 01:45 PM

Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya?

Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula? Mar 18, 2025 pm 01:44 PM

Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula?

Terangkan tujuan setiap kaedah kitaran hayat dan kes penggunaannya. Terangkan tujuan setiap kaedah kitaran hayat dan kes penggunaannya. Mar 19, 2025 pm 01:46 PM

Terangkan tujuan setiap kaedah kitaran hayat dan kes penggunaannya.

Apakah teknik pengoptimuman prestasi React (memoisasi, pemisahan kod, pemuatan malas)? Apakah teknik pengoptimuman prestasi React (memoisasi, pemisahan kod, pemuatan malas)? Mar 18, 2025 pm 01:57 PM

Apakah teknik pengoptimuman prestasi React (memoisasi, pemisahan kod, pemuatan malas)?

Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen? Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen? Mar 19, 2025 pm 03:59 PM

Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen?

See all articles