Bagaimana Cara Mengatur Kecerahan Gambar Dengan CSS

Semakin berkembangnya teknologi informasi, membuat teknologi pada bidang pemrograman berkembang pesat. Kini CSS memiliki banyak pembaharuan dan turunannya yang mempermudah para developer lebih mudah menggunakannya. Apalagi sudah tersedianya berbagai CSS Framework seperti Bootstrap dan Tailwind CSS. Dalam pembuatan layout sebuah website, gambar atau foto adalah salah satu bagian penting dari desain suatu halaman website.

Pada kondisi tertentu Anda ingin meletakkan atau menimpa teks diatas sebuah gambar, misal pada sebuah gambar Anda ingin menimpa nya dengan sebuah teks keterangan. Ada kalanya saat Anda ingin menggunakan teks berwarna cerah seperti putih, namun gambar yang Anda ingin timpa juga berwarna cerah. Misalnya, gambar background awan atau langit Anda timpa dengan teks berwarna putih. Jelas saja teks yang Anda timpa pada gambar tidak terlihat jelas. Sebagai contoh lihatlah gambar berikut ini.

Bisakah Anda membaca teks pada gambar diatas dengan jelas? cukup sulit bukan?. Pada saat ini Anda memerlukan cara untuk membuat teks dapat terlihat tanpa terpengaruh warna pada gambar. Anda dapat memainkan gelap terang dari sebuah gambar dengan CSS.

Mengatur Gelap Terang Pada Gambar Dengan CSS

Anda dapat menggunakan beberapa cara untuk mengubah gambar menjadi gelap, sebagai contoh kita menggunakan gambar berikut dan kita ubah menjadi sedikit lebih gelap.

Anda dapat menggunakan properti filter seperti brightness() dan contrast() pada CSS untuk membuat gambar sedikit lebih gelap.

Menggunakan Brightness

Menerapkan filter brightness pada sebuah gambar, membuatnya tampak lebih terang atau gelap. Jika Nilai yang dimasukkan 0%, hal itu akan membuat gambar benar benar hitam atau gelap. Sedangkan jika nilai 100%, hal itu tidak akan mengubah apa-apa. Anda dapat memasukkan nilai 50% agar gambar dapat berubah sedikit gelap. Anda juga dapat memasukkan nilai lebih dari 100%, dengan hasil gambar yang akan lebih cerah. Jika nilai dikosongkan atau tidak diberi nilai, maka nilai 100% yang akan otomatis digunakan.

CSS :

Hasil :

Menggunakan Contrast

Dengan filter contrast, Anda dapat menyesuaikan nilai kontras. Sama halnya dengan brightness, Jika Nilai yang dimasukkan 0%, hal itu akan membuat gambar benar benar hitam atau gelap dan nilai 100% tidak akan mengubah apa-apa . Anda juga dapat memasukkan nilai lebih dari 100%, hal ini memberikan hasil dengan kontras yang lebih sedikit pada gambar.

CSS :

Hasil :