Bagaimana cara membuat warna latar buram di html?

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

1

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

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

Keluaran

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

Keluaran

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