Tingkat opacity menggambarkan tingkat transparansi, di mana 1 tidak transparan sama sekali, 0. 5 adalah 50% tembus pandang, dan 0 benar-benar transparan
opasitas 0. 2
opasitas 0. 5
opasitas 1
(bawaan)
Catatan. Saat menggunakan properti opacity_ untuk menambahkan transparansi ke latar belakang suatu elemen, semua elemen turunannya juga menjadi transparan. Ini dapat membuat teks di dalam elemen yang sepenuhnya transparan sulit dibaca. Jika Anda tidak ingin menerapkan opacity ke elemen anak, gunakan nilai warna RGBA sebagai gantinya (Lihat "Contoh Lainnya" di bawah)
Tampilkan demo ❯
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti
Propertyopacity4. 09. 02. 03. 19. 0
Catatan. IE8 dan versi sebelumnya mendukung alternatif, properti filter. Suka. Saring. Alfa(opasitas=50)
Sintaks CSS
kegelapan. nomor. awal. mewarisi;
Nilai properti
ValueDescriptionDemonumberMenentukan opacity. Dari 0. 0 (sepenuhnya transparan) hingga 1. 0 (sepenuhnya buram)Demo ❯initialMenetapkan properti ini ke nilai standarnya. Baca tentang initialinheritInherits properti ini dari elemen induknya. Baca tentang mewarisi
Lebih Banyak Contoh
Contoh
Properti opacity menambahkan transparansi ke latar belakang suatu elemen, dan juga ke semua elemen turunannya. Ini membuat teks di dalam elemen transparan sulit dibaca
div. pertama {
kegelapan. 0. 1;
}
div. kedua {
kegelapan. 0. 3;
}
div. ketiga {
kegelapan. 0. 6;
}
Contoh
Untuk tidak menerapkan opacity ke elemen anak (seperti pada contoh di atas) gunakan nilai warna RGBA. Contoh berikut mengatur opacity untuk warna latar belakang, tetapi tidak untuk teks
Properti opacity_ sering digunakan bersama dengan pemilih :hover untuk mengubah opacity pada mouse-over
Contoh dijelaskan
Blok CSS pertama mirip dengan kode pada Contoh 1. Selain itu, kami telah menambahkan apa yang akan terjadi saat pengguna mengarahkan kursor ke salah satu gambar. Dalam hal ini kami ingin gambar TIDAK transparan saat pengguna mengarahkan kursor ke atasnya. CSS untuk ini adalah opacity:1;
Saat penunjuk mouse menjauh dari gambar, gambar akan menjadi transparan kembali
Contoh efek hover terbalik
Kotak Transparan
Saat menggunakan properti opacity_ untuk menambahkan transparansi ke latar belakang suatu elemen, semua elemen turunannya mewarisi transparansi yang sama. Ini dapat membuat teks di dalam elemen yang sepenuhnya transparan sulit dibaca
Transparansi menggunakan RGBA
Jika Anda tidak ingin menerapkan opacity ke elemen turunan, seperti pada contoh kami di atas, gunakan nilai warna RGBA. Contoh berikut menetapkan opacity untuk warna latar belakang dan bukan teks
Anda belajar dari Bab Warna CSS kami, bahwa Anda dapat menggunakan RGB sebagai nilai warna. Selain RGB, Anda dapat menggunakan nilai warna RGB dengan saluran alfa (RGBA) - yang menentukan opasitas warna
Nilai warna RGBA ditentukan dengan. rgba (merah, hijau, biru, alfa). Parameter alfa adalah angka antara 0. 0 (transparan penuh) dan 1. 0 (sepenuhnya buram)
Transparansi memainkan peran penting dalam pengembangan ujung depan. Ini memungkinkan Anda memilih seberapa transparan elemen di halaman web Anda muncul
Anda dapat menyesuaikan transparansi dengan beberapa cara – karena tentu saja, di CSS, ada beberapa cara untuk melakukan hal yang sama
Properti CSS opacity adalah cara pertama yang mungkin terlintas di benak Anda untuk mengubah transparansi. Tetapi properti ini tidak selalu dapat membantu, terutama bila ada gambar latar belakang dengan teks di dalamnya yang ingin Anda buat transparan
Jadi dalam artikel ini, saya akan menunjukkan kepada Anda berbagai cara untuk menyesuaikan transparansi sehingga Anda dapat mulai menerapkannya dalam proyek pengkodean Anda
Transparansi Gambar dengan Properti Opasitas CSS
Untuk membuat gambar transparan, Anda dapat menggunakan properti CSS opacity, seperti yang saya sebutkan di atas. Sintaks dasar dari properti opacity ditunjukkan pada cuplikan kode di bawah ini
selector { opacity: value; }Properti opacity mengambil nilai dari <img src="freecodecamp.png" alt="freecodecamp-logo" /> 1 hingga <img src="freecodecamp.png" alt="freecodecamp-logo" /> 2, dengan <img src="freecodecamp.png" alt="freecodecamp-logo" /> 3 menjadi nilai default untuk semua elemen. Semakin rendah nilainya, semakin transparan. Jadi jika suatu elemen diberi opasitas <img src="freecodecamp.png" alt="freecodecamp-logo" /> 4, itu tidak akan terlihat
Anda dapat menemukan contoh nilai opasitas yang berbeda dalam cuplikan kode di bawah ini
<img src="freecodecamp.png" alt="freecodecamp-logo" /> _Saya telah menambahkan beberapa CSS untuk memusatkan semua yang ada di halaman
body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } _Nilai opasitas <img src="freecodecamp.png" alt="freecodecamp-logo" />
_3 adalah nilai default, jadi gambar akan muncul seperti ini
Kode ini memberi kita opasitas 50%, dan Anda dapat melihat bahwa logonya sedikit memudar
Dengan opasitas <img src="freecodecamp.png" alt="freecodecamp-logo" /> _4, gambar 100% transparan, sehingga menjadi tidak terlihat
Satu-satunya cara untuk memastikan gambar ada di halaman adalah dengan memeriksanya dengan devtool browser Anda
Anda dapat menggunakan nilai opasitas ini untuk melakukan banyak hal – misalnya, Anda dapat menggunakannya untuk menyertakan teks di atas gambar pahlawan di situs web
Anda mungkin bertanya-tanya mengapa Anda ingin membuat konten tidak terlihat dengan nilai opasitas 0. Yah, ini bisa berguna dalam animasi, dan juga dalam membangun game HTM + CSS + JavaScript
Anda pasti ingin menggunakan pemosisian CSS untuk membantu Anda menyelaraskan berbagai hal. Saya akan membahas ini di bagian artikel selanjutnya
Transparansi Gambar Latar Belakang dalam HTML dan CSS
CSS menawarkan cara untuk menyetel gambar latar belakang untuk elemen penampung dengan properti ________ 1 _______7, jadi Anda tidak perlu melakukannya dengan CSS. Ini berarti Anda juga dapat menempatkan teks di dalam wadah
<div class="showcase"> <h1>A group of ring-tailed lemurs</h1> </div> body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } .showcase { background-image: url("ring-tailed-lemurs.jpeg"); height: 400px; width: 500px; background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 0.6; }Kelemahan dari pendekatan ini adalah opacity diatur untuk wadah tempat gambar dan teks berada. Jadi, opacity juga memengaruhi teks, bukan hanya gambar. Ini mungkin bukan yang Anda inginkan
Solusinya
Secara default, saat Anda menerapkan opasitas ke sebuah wadah, keturunannya juga akan mewarisinya
Solusi dalam situasi ini adalah menyetel gambar latar belakang di HTML. Hal ini memudahkan untuk menerapkan opacity hanya pada gambar, daripada menyetel gambar latar belakang untuk wadah di CSS
Kali ini, gambar dan teks akan dipisahkan, sehingga teks tidak akan mewarisi nilai yang ditetapkan untuk opacity
Ini berarti Anda juga harus menggunakan pemosisian CSS untuk menyelaraskan teks di dalam gambar
<div class="showcase"> <img src="ring-tailed-lemurs.jpeg" alt="lemurs" class="bg-image" /> <h1 class="bg-img-title">A group of ring-tailed lemurs</h1> </div> body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } .showcase { position: relative; } .bg-image { opacity: 0.7; } .bg-img-title { position: absolute; top: 420px; left: 20px; }Dalam cuplikan kode CSS di atas, saya menggunakan <img src="freecodecamp.png" alt="freecodecamp-logo" /> 9 untuk memusatkan semua yang ada di halaman
Wadah body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } _0 elemen dengan kelas body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 1 diposisikan body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 2, sehingga Anda dapat memposisikan body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 3 teks body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 4 di dalamnya. Ini akan mendorong teks body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } _3 ke sudut kiri atas gambar. Properti body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 6 dan body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 7 kemudian digunakan untuk mendorong teks ke sudut kiri bawah gambar
Jika Anda bertanya-tanya apa itu properti body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } _6 dan body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } img { opacity: 1; } 7, itu adalah properti yang dapat Anda akses saat menggunakan properti tampilan
Selain keduanya, Anda juga mendapatkan akses ke properti img { opacity: 0.5; } 0 dan img { opacity: 0.5; } 1. Mereka membiarkan Anda memposisikan elemen di mana saja
Pada akhirnya, gambar menjadi buram dan teks tidak terpengaruh
Kesimpulan
Pada artikel ini, Anda mempelajari cara menggunakan properti opacity CSS untuk membuat gambar menjadi transparan
Karena CSS tetap rumit dan agak aneh, ada baiknya menggabungkan properti opacity dengan fitur CSS lainnya seperti pemosisian agar dapat digunakan dengan benar
Selain pemosisian CSS, Anda juga dapat menggunakan properti opacity dengan elemen semu CSS seperti img { opacity: 0.5; } 3 dan img { opacity: 0.5; } 4, yang merupakan cara hacky dalam melakukan sesuatu
Terima kasih telah membaca, dan terus coding
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
Pengembang web dan penulis teknis yang berfokus pada teknologi frontend
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai