Dalam tutorial ini, pelajari cara Membuat Warna Latar Belakang Transparan menggunakan CSS. Jawaban singkatnya adalah. gunakan warna CSS rgba[]
atau terapkan properti CSS opacity
yang membuat perilaku transparan ke elemen yang dipilih
Setelah menerapkan efek ke elemen, bagian belakang latar belakang masih sedikit terlihat oleh pemirsa. Ini bisa berguna saat Anda ingin menambahkan teks ke wadah. Mari kita cari tahu dengan contoh yang diberikan di bawah ini
Daftar isi
Cara Membuat Warna Background Transparan Menggunakan CSS RGBA[]
Anda dapat menggunakan kode warna RGBA[]
CSS untuk memberikan warna latar transparan. Jika Anda ingin membuat latar belakang teks terlihat oleh pengunjung untuk menampilkan gambar belakang, efeknya berguna untuk menambah tampilan dan nuansa pada elemen
Lihat contoh di bawah ini untuk menambahkan background dengan warna transparan dengan CSS
Uji secara Langsung
Contoh
XHTML1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
. main-div{
gambar-latar belakang. url[. /. /gambar/alam. jpg];
lampiran-latar belakang. gulir;
pengisian. 20 piksel;
}
. transparan-bg{
latar belakang. rgba[255, 165, 0, 0.73];
pengisian. 20 piksel;
warna. #fff;
perataan teks. pusat;
ukuran font. 26px;
}
Keluaran
Latar belakang transparan
Contoh di atas menggunakan background warna transparan untuk menampilkan gambar. Gambar berada di belakang latar belakang div induk dan latar belakang adalah div dalam. Anda dapat mengubah ukuran konten di atas sesuai kebutuhan Anda
Menerapkan Transparansi Menggunakan Properti Opasitas CSS
Anda juga dapat menggunakan properti CSS opacity
_ untuk menerapkan transparansi ke latar belakang. Nilainya bisa dari 0 hingga 1 dan Anda harus menambahkan nilai di atas 0 dan di bawah 1 untuk efek transparan. Contoh di bawah berisi contoh yang sama seperti yang diberikan pada bagian sebelumnya di atas
Contoh di bawah sebenarnya tidak membuat warna background transparan. Itu menggunakan properti opacity untuk membuat div di atas sedikit terlihat oleh pengguna
Uji secara Langsung
Contoh
XHTML1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
. main-divopc{
gambar-latar belakang. url[. /. /wp-content/uploads/2018/10/best-ide-text-editor. jpg];
lampiran-latar belakang. gulir;
pengisian. 20 piksel;
}
. transparent-bgopc{
latar belakang. oranye;
pengisian. 20 piksel;
warna. #fff;
perataan teks. pusat;
ukuran font. 26px;
opasitas. 0. 6;
}
Keluaran
Latar belakang transparan
Contoh di atas berisi gambar latar belakang ke div induk. Itu juga berisi div bagian dalam dengan konten dan teks bagian dalam. Satu hal lagi yang harus Anda perhatikan di sini bahwa jika Anda menggunakan properti opacity, teksnya juga sedikit terlihat oleh pemirsa
Warna Background Transparansi pada Efek hover Menggunakan CSS
Selain semua metode di atas, Anda juga dapat membuat warna latar belakang transparan hanya dengan mengarahkan kursor menggunakan warna rgba[]
CSS. Contoh menggunakan konten CSS dan div yang sama dan menerapkan efek pada hover ke elemen div. Lihat contoh yang diberikan di bawah ini untuk memeriksa efek hover
Uji secara Langsung
Contoh
XHTML1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. main-divhover{
gambar-latar belakang. url[. /. /wp-content/uploads/2018/05/stop-secara tidak sengaja-publikasikan-posting-wordpress. jpg];
lampiran-latar belakang. gulir;
pengisian. 20 piksel;
}
. main-divhover. melayang. transparent-bgover{
latar belakang. rgba[255, 165, 0, 0.73] . penting;
}
. transparent-bgover{
latar belakang. oranye;
pengisian. 20 piksel;
warna. #fff;
perataan teks. pusat;
ukuran font. 26 piksel;
}
Keluaran
Latar belakang transparan
Anda dapat mengarahkan kursor ke contoh di atas untuk melihat efek latar belakang transparan. Ia menggunakan properti warna RGBA[]
CSS yang berlaku saat seseorang mengarahkan kursor ke konten di atas
Anda mungkin juga suka membaca
- Cara Membuat Efek Overlay Hover Gambar Menggunakan CSS
- Cara mengubah transparansi latar belakang Tanpa Mempengaruhi Anak
Saya harap Anda menyukai postingan ini tentang cara menerapkan opacity ke warna latar belakang menggunakan CSS
Juga, jika Anda ingin mendapatkan bentuk video dari tutorial kami, Anda dapat berlangganan Saluran YouTube kami untuk mempelajari lebih lanjut