Artikel ini akan memperkenalkan anda kepada konsep yang akan membantu anda memahami kelegapan dan beritahu anda cara mengawal parameter ini. Petunjuk berikut akan dibahas dalam artikel ini,
- Kelegapan dalam CSS
- Kelegapan diwarisi dengan unsur lata
- Tetapan atribut RGBA untuk elemen lata
- Kelegapan berubah pada kesan hover
Kelegapan latar belakang elemen adalah tetapan ciri yang berguna dalam reka bentuk HTML. Dengan menetapkan tahap kelegapan (ketelusan terbalik), seorang pereka dapat mengawal keterlihatan elemen melalui sifat kelegapan CSS. Ini biasanya digunakan sebagai latar belakang ketika terdapat unsur-unsur lata, diletakkan satu di atas yang lain.
Senario yang paling biasa di mana ciri ini digunakan adalah:
- Gambar latar belakang yang separa telus diletakkan di belakang elemen teks.
- Gambar latar kelihatan tidak jelas, sehingga tidak mendominasi teks di depan.
- Gambar mungkin menjadi fokus penuh apabila pengguna memilih untuk melihatnya secara eksplisit.
Anda mungkin mahu membaca di sebelum meneruskan pembelajaran mengenai kelegapan CSS.
Untuk tutorial CSS yang komprehensif, lawati Tutorial Edureka CSS Untuk Pemula . Anda akan mendapat kemajuan yang baik mengenai cara CSS digunakan untuk menambah reka bentuk web HTML.
Teruskan dengan artikel ini mengenai Opacity dalam CSS
Kelegapan dalam CSS
Dalam CSS, Opacity ditetapkan sebagai nilai numerik antara 0,0 - 1,0. Nilai yang hampir dengan sifar menunjukkan lebih banyak ketelusan, gambar akan kelihatan sangat ringan. Mari kita mulakan dengan contoh gambar yang ditunjukkan dengan ketelusan 50%. Lihat Contoh 1 di bawah.
cara menggunakan fail dalam java
Contoh 1: Gambar latar ditetapkan ke separuh- ketelusan
img {opacity: 0.5 filter: alpha (opacity = 50) / * Untuk IE8 dan lebih awal * /} 
Contoh 1: Keluaran
Imej Asal (Kelegapan 100%)
Imej dengan tetapan Kelegapan 50%
Dalam contoh di atas, hanya ada satu elemen - gambar. Elemen lain juga boleh diatur dengan parameter kelegapan seperti teks, elemen div dan sebagainya.
Teruskan dengan artikel ini mengenai Opacity dalam CSS
Kelegapan diwarisi dengan unsur lata
Apabila elemen ditumpuk satu sama lain, jika elemen latar belakang mempunyai tetapan kelegapan, maka elemen tersebut diwarisi oleh semua elemen anak. Ini adalah tetapan asal . Ini bermaksud jika kotak teks diletakkan di atas gambar dan gambar mempunyai tetapan opasiti 0,5, maka kedua-dua gambar dan elemen teks hanya akan dapat dilihat sebahagiannya.
Mari kita ambil contoh elemen teks anak yang diletakkan di atas gambar TOM & JERRY dalam Contoh seterusnya. Kita dapat melihat kesan kelegapan lalai dalam Contoh 2.
.container {position: relatif text-align: center opacity: 0.5} .centered {position: absolut top: 50% left: 50% transform: translate (-50%, -50%) warna: ukuran font biru: 40px} } TOM & JERRYContoh 2: Teks mewarisi kelegapan dari gambar ibu bapa
Teruskan dengan artikel mengenai Opacity dalam CSS ini
Tetapan atribut RGBA untuk elemen lata
Terdapat cara lain di mana kelegapan dapat dikawal dengan unsur lata. Sekiranya anda mahu elemen anak tidak terpengaruh oleh kelegapan elemen latar belakangnya, maka anda boleh menggunakannya Tetapan atribut RGBA .
Contoh 3: Menggunakan tetapan RGBA
latar belakang: rgba (76, 175, 80, 1.0) / * Gambar tidak mempunyai tetapan kelegapan * / / * Latar belakang hijau untuk teks dengan kelegapan 100% * / / * Teks warna biru mempunyai kelegapan 100% * /
latar belakang: rgba (76, 175, 80, 0.4) / * Gambar tidak mempunyai tetapan kelegapan * / / * Latar belakang hijau untuk teks dengan kelegapan 40% * / / * Teks biru masih dapat dilihat dengan kelegapan 100% * /
Selepas kod warna RGB, atribut 'a' bermaksud alfa . The alfa parameter adalah nombor antara 0.0 (telus sepenuhnya) dan 1.0 (legap sepenuhnya).
Teruskan dengan artikel ini mengenai Opacity dalam CSS
Kelegapan berubah pada kesan hover
Dalam beberapa senario, pereka web ingin kelegapan berbeza-beza bergantung pada sama ada pengguna memfokuskan pada elemen atau tidak. Sebagai contoh, katakanlah gambar ditetapkan pada opacity 50% secara lalai. Namun, apabila pengguna mengarahkan tetikus ke atas gambar, maka kita mahu gambar tersebut menjadi fokus penuh dengan kelegapan 100%.
Contoh 4 menunjukkan bagaimana ini dilakukan.
Perkara umum yang perlu diperhatikan:
- Pengaturan Opacity adalah alternatif untuk menggunakan atribut ‘visibility’ di CSS. Walau bagaimanapun, menggunakan tetapan kelegapan memudahkan menetapkan pelbagai tahap ketelusan, mulai dari sifar hingga penuh.
- Tahap kelegapan akan ditetapkan setelah ujian yang teliti di pelbagai penyemak imbas. Apabila kelegapan ditetapkan ke nilai rendah, kadang-kadang teks atau gambar boleh menjadi sama sekali tidak dapat dilihat atau tidak dapat dibaca.
- Idea di sebalik menggunakan kelegapan adalah memberi tumpuan tajam pada beberapa elemen sementara elemen latar belakang yang lain tidak mengalihkan perhatian pengguna. Jadi elemen latar belakang seperti itu ditetapkan dengan kelegapan yang lebih rendah
- Di Internet Explorer, untuk IE8 dan versi yang lebih lama, sifat opacity adalah tetapan ‘filter’ yang berkisar antara 1 hingga 100. Di semua penyemak imbas lain, ia berkisar antara 0 hingga 1.
Ini membawa kita ke akhir artikel ini mengenai Opacity In CSS.
Sekiranya anda berminat untuk mempelajari lebih lanjut mengenai pengembangan web, lihat oleh Edureka. Latihan Pensijilan Pembangunan Web akan membantu anda Mempelajari cara membuat laman web yang mengagumkan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery dan Google API dan menyebarkannya ke Amazon Simple Storage Service (S3).
Sekiranya anda masih berminat Sekiranya anda mempunyai pertanyaan, anda boleh menghantarnya di bahagian komen blog 'Opacity In CSS' ini, dan kami akan menghubungi anda secepat mungkin.