Berikut adalah hasil dari artikel ini:
Ayo mulai!
Ubah Warna Gambar di CSS
Untuk mengubah warna gambar di CSS, pelajari dulu properti filter dan fungsinya. Anda akan mendapatkan pemahaman yang lebih baik dengan cara ini.
filter Properti CSS
Untuk mengontrol efek visual dari properti filter gambar CSS digunakan. Efek visualnya adalah:
- mengaburkan
- kecerahan
- penyesuaian warna
- bayangan jatuh
- kegelapan
Sintaks properti filter
Sintaks properti filter adalah:
Saring : mengaburkan ( ) | bayangan jatuh ( ) | kegelapan ( )- mengaburkan(): digunakan untuk menerapkan efek blur pada gambar.
- bayangan jatuh(): membuat bayangan di atas gambar.
- kegelapan(): digunakan untuk menambahkan transparansi pada gambar.
Kita dapat menggunakan beberapa filter menggunakan properti filter ini. Artikel ini adalah tentang cara mengubah warna gambar, jadi di sini kami akan menjelaskan cara menggunakan fungsi drop-shadow(), dan opacity() dengannya.
bayangan jatuh()
drop-shadow() adalah fungsi bawaan CSS yang memungkinkan pengaturan bayangan ke elemen atau gambar apa pun. Parameter berikut digunakan dalam fungsi drop-shadow() untuk mengubah warna gambar:
- offset-x: Ini digunakan untuk menambahkan bayangan horizontal.
- offset-y: Bayangan ditambahkan secara vertikal menggunakan ini.
- warna: Bayangan diwarnai dengan parameter ini.
Untuk memperjelas poin-poin ini, mari kita beralih ke sintaks drop-shadow:
bayangan jatuh ( warna offset-x offset-y )- offset-x dan offset-y bisa positif atau negatif.
- Secara horizontal, nilai positif digunakan untuk menambahkan efek di sisi kanan, dan negatif untuk sisi kiri.
- Secara vertikal, nilai positif untuk sisi bawah, dan negatif untuk bagian atas.
- Di tempat warna, Anda dapat menetapkan warna apa pun yang ingin Anda berikan pada gambar.
kegelapan()
opacity() digunakan untuk menambahkan transparansi ke elemen atau gambar apa pun. Sintaks dari opacity() adalah:
kegelapan ( nomor ) ;Di Sini “ nomor ” saya s digunakan untuk mengatur tingkat opacity antara 0,0 hingga 1,0. Untuk membuat gambar sepenuhnya transparan, Anda dapat mengaturnya sebagai 0,0.
Untuk memperjelas poin yang disebutkan di atas, mari kita beralih ke contoh.
Bagaimana Mengubah Warna Gambar di CSS?
Pada contoh di bawah ini, pertama-tama kita akan menambahkan gambar menggunakan tag :
< gambar kelas = 'gambar' src = 'gambar.jpg' semuanya = '' >
< / tubuh >
Sebelum menerapkan properti filter, hasilnya seperti ini:
Untuk mengubah warna gambar, mari kita pindah ke CSS dan menerapkan properti filter padanya. Kami akan mengatur opacity menjadi 0,5 untuk transparansi gambar. Pada fungsi drop-shadow(), nilai offset-x dan offset-y adalah 0 karena kita hanya ingin mengubah warna sebuah gambar.
.gambar {Saring : kegelapan ( 0,5 ) bayangan jatuh ( 0 0 cokelat ) ;
}
Berikut adalah hasil akhir setelah implementasi:
Warna gambar telah berhasil diubah.
Kesimpulan
Untuk mengubah warna gambar, dua fungsi CSS: opacity() dan drop-shadow() digunakan dengan properti filter. opacity() menentukan transparansi gambar dan drop-shadow() memberikan warna dan bayangan pada gambar. Artikel ini menjelaskan metode mengubah warna gambar menggunakan CSS.