Cara Dim Gambar di CSS

Peredupan gambar membuat lebih sulit untuk dilihat, tetapi itu mungkin hanya efek yang Anda cari. Gambar redup menjadi kurang menonjol pada laman web dan kurang menarik perhatian dibandingkan objek di sekitarnya. Anda mungkin meredupkan gambar pantai yang cerah, misalnya, untuk menarik fokus pengguna ke menu di bawah gambar. Anda tidak perlu membuat banyak gambar untuk menghasilkan efek peredupan ini. Cascading Style Sheets, atau CSS, dapat melakukan trik ini menggunakan beberapa baris kode.

CSS

CSS adalah bahasa yang digunakan perancang situs untuk menentukan cara objek melihat pada halaman web. Atribut ini, seperti warna dan opacity, memiliki nilai seperti yang ditunjukkan pada contoh berikut: .redBorder {border-color: red; gaya perbatasan: solid;}

Kode ini menciptakan kelas CSS bernama redBorder. Jika salah satu tag img HTML Anda mereferensikan kelas ini, pengunjung situs akan melihat batas berwarna merah di sekitar gambar saat melihatnya di halaman web Anda. Kode HTML yang mereferensikan kelas ini terlihat sebagai berikut dan batas merah dapat dihapus dengan menghapus referensi kelas di tag img ini:

Opacity CSS

Dengan mengubah opacity gambar menggunakan CSS, Anda membuatnya lebih redup. Kode yang ditunjukkan di bawah ini menciptakan kelas bernama opacity40 yang mendefinisikan nilai opacity 40 persen: .opacity40 {filter: alpha (opacity = 40);

opacity: 0, 4; }

Atribut filter kelas menggunakan skala opacity antara 0 dan 100, dan atribut opacity-nya memiliki skala opacity dengan nilai mulai dari 0 hingga 1. Menggunakan kedua atribut memastikan bahwa semua browser dapat mengubah opacity gambar Anda. Tambahkan referensi kelas ini ke gambar untuk membuatnya redup. Anda juga dapat membuat kelas bernama "opacity100" dan mengatur nilainya sehingga opacity gambar adalah 100 persen. Kelas itu akan membuat gambar buram.

Peredupan Secara Programatis

Halaman web Anda dapat menampilkan gambar redup ketika pengguna membuka halaman, atau kode Anda dapat menyebabkan gambar redup kemudian setelah halaman dimuat. Untuk membuat gambar redup pada awalnya, atur opacity ke nilai yang lebih rendah, seperti yang dijelaskan sebelumnya. Untuk meredupkan gambar saat aplikasi Anda berjalan, ubah nama kelas yang mendefinisikan opacity gambar seperti yang ditunjukkan dalam contoh di bawah ini: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";

Kode ini, muncul di dalam fungsi JavaScript, memperoleh referensi ke gambar dan mengubah nama kelasnya menjadi "opacity40." Pengguna dapat mengklik tombol yang menjalankan fungsi JavaScript, atau kode Anda dapat memanggilnya kapan saja.

Pertimbangan

Fungsi JavaScript Anda memerlukan nilai id dari gambar yang ingin Anda redupkan jika Anda ingin mengubah opacity-nya secara dinamis. Id gambar dalam contoh yang dijelaskan sebelumnya adalah "image1." Jika Anda memiliki beberapa gambar yang redup, berikan nilai id unik dan berikan ke fungsi yang melakukan perubahan opacity. Buat sebanyak mungkin kelas CSS yang Anda inginkan yang menentukan tingkat opacity yang berbeda. Anda kemudian dapat meredupkan gambar ke tingkat apa pun dengan mengubah referensi kelasnya dalam fungsi JavaScript.