Cara Mengecilkan Gambar dalam CSS

Mengecilkan gambar menjadikannya lebih sukar untuk dilihat, tetapi mungkin itulah kesan yang anda cari. Gambar yang redup menjadi kurang menonjol di laman web dan menarik perhatian lebih sedikit daripada objek di sekelilingnya. Anda mungkin meredupkan gambar pantai yang cerah, misalnya, untuk menarik tumpuan pengguna ke menu di bawah gambar. Anda tidak perlu membuat banyak gambar untuk menghasilkan kesan peredupan ini. Cascading Style Sheets, atau CSS, dapat melakukan helah ini dengan menggunakan beberapa baris kod.

CSS

CSS adalah bahasa yang digunakan pereka laman web untuk menentukan cara melihat objek di laman web. Atribut ini, seperti warna dan kelegapan, mempunyai nilai seperti yang ditunjukkan dalam contoh berikut: .redBorder {border-color: red; gaya sempadan: padat;}

Kod ini membuat kelas CSS bernama redBorder. Sekiranya salah satu daripada tag img HTML anda merujuk kelas ini, pelawat laman web akan melihat sempadan merah yang padat di sekitar gambar ketika melihatnya di laman web anda. Kod HTML yang merujuk kelas ini kelihatan seperti berikut dan sempadan merah dapat dikeluarkan dengan membuang rujukan kelas dalam tag img ini:.

Kelegapan CSS

Dengan mengubah kelegapan gambar menggunakan CSS, anda menjadikannya lebih malap. Kod yang ditunjukkan di bawah membuat kelas bernama opacity40 yang menentukan nilai kelegapan 40 peratus: .opacity40 {filter: alpha (opacity = 40);

kelegapan: 0.4; }

Atribut filter kelas menggunakan skala opacity antara 0 dan 100, dan atribut opacity mempunyai skala opacity dengan nilai antara 0 hingga 1. Menggunakan kedua-dua atribut ini memastikan bahawa semua penyemak imbas dapat mengubah kelegapan gambar anda. Tambahkan rujukan kelas ini ke gambar untuk menjadikannya redup. Anda juga boleh membuat kelas bernama "opacity100" dan menetapkan nilainya sehingga kelegapan gambar adalah 100 peratus. Kelas itu akan menjadikan imej legap.

Peredupan Secara Berprogram

Halaman web anda dapat menampilkan gambar yang redup ketika pengguna membuka halaman, atau kod anda dapat menyebabkan gambar menjadi redup setelah halaman dimuat. Untuk menjadikan gambar redup pada mulanya, tetapkan kelegapannya ke nilai yang lebih rendah, seperti yang dijelaskan sebelumnya. Untuk meredupkan gambar semasa aplikasi anda berjalan, ubah nama kelas yang menentukan kelegapan gambar seperti yang ditunjukkan dalam contoh di bawah: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";

Kod ini, yang muncul di dalam fungsi JavaScript, memperoleh rujukan pada gambar dan mengubah nama kelasnya menjadi "opacity40." Pengguna dapat mengklik butang yang menjalankan fungsi JavaScript, atau kod Anda dapat memanggilnya kapan saja.

Pertimbangan

Fungsi JavaScript anda memerlukan nilai id gambar yang ingin dimalapkan jika anda ingin mengubah kelegapannya secara dinamik. Id gambar dalam contoh yang dijelaskan sebelumnya adalah "image1." Sekiranya anda mempunyai banyak gambar yang redup, berikan nilai id yang unik dan sampaikan ke fungsi yang melakukan perubahan kelegapan. Buat seberapa banyak kelas CSS yang anda mahukan yang menentukan tahap kelegapan yang berbeza. Anda kemudian boleh meredupkan gambar ke tahap apa pun dengan mengubah rujukan kelasnya dalam fungsi JavaScript.