Artikel ini akan memperkenalkan Anda pada konsep yang akan membantu Anda memahami opacity dalam dan memberi tahu Anda cara mengontrol parameter ini. Petunjuk berikut akan dibahas dalam artikel ini,
- Opasitas di CSS
- Opasitas diwarisi dengan elemen berjenjang
- Pengaturan atribut RGBA untuk elemen berjenjang
- Perubahan opasitas pada efek hover
Opasitas latar belakang suatu elemen adalah setelan fitur yang berguna dalam desain HTML. Dengan menyetel tingkat opasitas (kebalikan dari transparansi), seorang desainer dapat mengontrol visibilitas elemen melalui properti opasitas CSS. Ini biasanya digunakan sebagai pengaturan latar belakang saat ada elemen bertingkat, ditempatkan satu di atas yang lain.
Skenario paling umum di mana fitur ini digunakan adalah ini:
- Gambar latar transparan sebagian ditempatkan di belakang elemen teks.
- Gambar latar belakang terlihat kabur, sehingga tidak mendominasi teks di depan.
- Gambar mungkin menjadi fokus penuh saat pengguna secara eksplisit memilih untuk melihatnya.
Anda mungkin ingin membaca tentang sebelum melanjutkan mempelajari tentang opasitas CSS.
pengecualian penanganan dalam prosedur tersimpan oracle
Untuk tutorial CSS komprehensif, kunjungi Tutorial CSS Edureka Untuk Pemula . Anda akan mendapatkan informasi awal yang luar biasa tentang cara penggunaan CSS untuk meningkatkan desain web HTML.
Pindah dengan artikel ini tentang Opacity in CSS
Opasitas di CSS
Di CSS, Opacity diatur sebagai nilai numerik yang berkisar antara 0,0 - 1,0. Nilai yang mendekati nol menunjukkan lebih banyak transparansi, gambar akan terlihat sangat terang. Mari kita mulai dengan contoh gambar yang ditampilkan dengan transparansi 50%. Lihat Contoh 1 di bawah.
Contoh 1: Gambar latar belakang disetel ke semi- transparansi
img {opacity: 0.5 filter: alpha (opacity = 50) / * Untuk IE8 dan sebelumnya * /} 
Contoh 1: Keluaran
Gambar Asli (100% Opacity)
Gambar dengan pengaturan Opacity 50%
Dalam contoh di atas, hanya ada satu elemen - gambar. Elemen lain juga dapat diatur dengan parameter opacity seperti teks, elemen div dan sebagainya.
Pindah dengan artikel ini tentang Opacity in CSS
Opasitas diwarisi dengan elemen berjenjang
Saat elemen ditumpuk satu sama lain, jika elemen latar belakang memiliki setelan opasitas, maka elemen tersebut diwarisi oleh semua elemen turunan. Ini adalah setingan awal . Artinya, jika kotak teks ditempatkan di atas gambar dan gambar memiliki pengaturan opasitas 0,5, maka gambar dan elemen teks hanya akan terlihat sebagian.
Mari kita ambil contoh elemen teks anak yang ditempatkan di atas gambar TOM & JERRY di Contoh berikutnya. Kita dapat melihat efek opacity default di Contoh 2.
.container {position: relative text-align: center opacity: 0.5} .centered {position: absolute top: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } TOM & JERRYContoh 2: Teks mewarisi opasitas dari gambar induk
Pindah dengan artikel ini tentang Opacity in CSS
Pengaturan atribut RGBA untuk elemen berjenjang
Ada cara lain di mana opasitas dapat dikontrol dengan elemen berjenjang. Jika Anda ingin elemen anak tetap tidak terpengaruh oleh opasitas elemen latar belakangnya, Anda dapat menggunakan Pengaturan atribut RGBA .
Contoh 3: Menggunakan pengaturan RGBA
background: rgba (76, 175, 80, 1.0) / * Gambar tidak memiliki pengaturan opacity * / / * Latar belakang hijau untuk teks dengan 100% opacity * / / * Teks berwarna biru memiliki 100% opacity * /
background: rgba (76, 175, 80, 0.4) / * Gambar tidak memiliki pengaturan opacity * / / * Latar belakang hijau untuk teks dengan opacity 40% * / / * Teks biru masih terlihat dengan 100% opacity * /
Setelah kode warna RGB, atribut 'a' adalah singkatan dari alfa . Itu alfa parameternya adalah angka antara 0,0 (transparan penuh) dan 1,0 (tidak tembus pandang).
Pindah dengan artikel ini tentang Opacity in CSS
Perubahan opasitas pada efek hover
Dalam beberapa skenario, desainer web ingin opasitas bervariasi tergantung pada apakah pengguna fokus pada elemen atau tidak. Misalnya, gambar disetel ke 50% opasitas secara default. Namun, saat pengguna mengarahkan mouse ke atas gambar, kami ingin gambar menjadi fokus penuh dengan opasitas 100%.
Contoh 4 menunjukkan bagaimana ini dilakukan.
Hal-hal umum yang perlu diperhatikan:
- Pengaturan opacity adalah alternatif untuk menggunakan atribut 'visibility' di CSS. Namun, menggunakan pengaturan opacity memudahkan untuk mengatur berbagai tingkat transparansi, mulai dari nol hingga penuh.
- Tingkat opasitas harus disetel setelah pengujian cermat di berbagai browser. Saat opasitas disetel ke nilai rendah, terkadang teks atau gambar menjadi sama sekali tidak terlihat atau tidak dapat dibaca.
- Ide di balik penggunaan opasitas adalah untuk memberikan fokus yang tajam pada beberapa elemen sementara elemen latar belakang lainnya tidak mengalihkan perhatian pengguna. Jadi elemen latar belakang tersebut disetel dengan opasitas lebih rendah.
- Di Internet Explorer, untuk IE8 dan versi yang lebih lama, properti opasitas adalah setelan 'filter' yang berkisar dari 1 hingga 100. Di semua browser lain, rentangnya dari 0 hingga 1.
Ini membawa kita ke akhir artikel ini tentang Opacity In CSS.
Jika Anda tertarik untuk mempelajari lebih lanjut tentang pengembangan web, lihat oleh Edureka. Pelatihan Sertifikasi Pengembangan Web akan membantu Anda mempelajari cara membuat situs web yang mengesankan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery, dan Google API, serta menerapkannya ke Amazon Simple Storage Service (S3).
Jika Anda masih tertarik Jika Anda memiliki pertanyaan, Anda dapat mempostingnya di bagian komentar di blog 'Opacity In CSS' ini, dan kami akan menghubungi Anda kembali secepatnya.