Berikut adalah hasil artikel ini:
Mari mulakan!
Tukar Warna Imej dalam CSS
Untuk menukar warna imej dalam CSS, ketahui terlebih dahulu tentang sifat penapis dan fungsinya. Anda akan mendapat pemahaman yang lebih baik dengan cara ini.
penapis Harta CSS
Untuk mengawal kesan visual sifat penapis imej CSS digunakan. Kesan visual ialah:
- blur
- kecerahan
- pelarasan warna
- bayang-bayang
- kelegapan
Sintaks Harta penapis
Sintaks sifat penapis ialah:
penapis : blur ( ) | bayang-bayang ( ) | kelegapan ( )- kabur(): digunakan untuk menggunakan kesan kabur pada imej.
- bayang-bayang(): mencipta bayang-bayang di atas imej.
- kelegapan(): digunakan untuk menambah ketelusan pada imej.
Kita boleh menggunakan berbilang penapis menggunakan sifat penapis ini. Artikel ini adalah tentang cara menukar warna imej, jadi di sini kami akan menerangkan cara menggunakan fungsi drop-shadow(), dan opacity() dengannya.
bayang-bayang()
drop-shadow() ialah fungsi terbina dalam CSS yang membenarkan menetapkan bayang kepada mana-mana elemen atau imej. Parameter berikut digunakan dalam fungsi drop-shadow() untuk menukar warna imej:
- offset-x: Ia digunakan untuk menambah bayang mendatar.
- offset-y: Bayang-bayang ditambah secara menegak menggunakan ini.
- warna: Bayang-bayang diwarnakan dengan parameter ini.
Untuk menjelaskan perkara ini, mari kita beralih ke sintaks bayang-bayang:
bayang-bayang ( warna offset-x offset-y )- offset-x dan offset-y boleh menjadi positif atau negatif.
- Dalam mendatar, nilai positif digunakan untuk menambah kesan di sebelah kanan, dan negatif adalah untuk sebelah kiri.
- Dalam menegak, nilai positif adalah untuk bahagian bawah, dan negatif adalah untuk bahagian atas.
- Di tempat warna, anda boleh menetapkan mana-mana warna yang anda mahu berikan kepada imej.
kelegapan()
opacity() digunakan untuk menambah ketelusan pada elemen atau mana-mana imej. Sintaks kelegapan() ialah:
kelegapan ( nombor ) ;Di sini “ nombor ” i s digunakan untuk menetapkan tahap kelegapan antara 0.0 hingga 1.0. Untuk menjadikan imej telus sepenuhnya, anda boleh menetapkannya sebagai 0.0.
Untuk menjelaskan perkara yang disebut di atas, mari kita beralih kepada contoh.
Bagaimana untuk Menukar Warna Imej dalam CSS?
Dalam contoh di bawah, pertama, kami akan menambah imej menggunakan tag :
< img kelas = 'imej' src = 'image.jpg' segala-galanya = '' >
< / badan >
Sebelum menggunakan sifat penapis, hasilnya adalah seperti ini:
Untuk menukar warna imej, mari beralih ke CSS dan gunakan sifat penapis padanya. Kami akan menetapkan kelegapan kepada 0.5 untuk ketelusan imej. Dalam fungsi drop-shadow(), nilai offset-x dan offset-y ialah 0 kerana kita hanya mahu menukar warna imej.
.imej {penapis : kelegapan ( 0.5 ) bayang-bayang ( 0 0 coklat ) ;
}
Berikut adalah keputusan akhir selepas pelaksanaan:
Warna imej telah berjaya ditukar.
Kesimpulan
Untuk mengubah suai warna imej, dua fungsi CSS: opacity() dan drop-shadow() digunakan dengan sifat penapis. opacity() menentukan ketelusan imej dan drop-shadow() memberikan warna dan bayang kepada imej. Tulisan ini menerangkan kaedah menukar warna imej menggunakan CSS.