Opasitas warna latar belakang css tanpa rgba

Dalam banyak kasus, Anda hanya ingin membuat warna latar belakang itu sendiri sebagian transparan, menjaga agar teks dan elemen lainnya sepenuhnya buram. Untuk mencapainya, gunakan nilai warna yang memiliki saluran alfa—seperti. Seperti opacity, nilai 1 untuk nilai saluran alfa membuat warna sepenuhnya buram. Oleh karena itu background-color: rgba(0,0,0,.5);_ akan mengatur warna latar belakang menjadi 50% opacity

Coba ubah nilai opacity dan alpha channel pada contoh di bawah ini untuk melihat lebih banyak atau lebih sedikit gambar latar belakang di balik kotak

Catatan. Berhati-hatilah agar teks Anda mempertahankan kontras yang cukup dengan latar belakang jika Anda melapisi gambar;

Buka file HTML dan buat empat judul di file HTML sehingga kita dapat menerapkan warna latar belakang dan mengubah opacity warna menggunakan CSS. Dalam tutorial ini, kami menggunakan studio kode visual untuk menjalankan kode HTML dan CSS ini. Kami membuat file HTML dalam perangkat lunak ini dan menulis HTML. Kode disediakan pada gambar berikut

Ini adalah gambar dari kode HTML yang disebutkan di atas. Kami akan mengubah opasitas warna latar belakang semua judul dan menampilkan warna dengan nilai opasitas berbeda

Kode CSS

Kami akan membuat file CSS di mana kami menggunakan properti CSS untuk mengubah opacity warna latar belakang judul di atas. Dalam kode ini, kami menggunakan properti "opacity" dari CSS

Untuk heading 1 “h1”, kita atur “background-color” menjadi “yellow”. "Opasitas" adalah "0. 4" untuk tajuk ini dan warna fontnya "hitam". Judul 2 "warna latar belakang" juga "kuning" tetapi "opasitas" di sini adalah "0. 6”. "warna latar belakang" dari pos 3 juga "kuning" tapi kali ini, "opacity" adalah "0. 8”. Sekarang, muncul judul 4. "warna latar belakangnya" sama dengan tajuk sebelumnya, tetapi kami tidak menggunakan warna "opasitas" di sini. Jadi, "warna latar belakang" dari judul keempat muncul sebagai warna "kuning" asli

Keluaran

Perbedaan nilai opasitas warna latar belakang ditampilkan dalam output ini. Anda dapat melihat perbedaan antara opasitas warna pada gambar ini

Warna latar judul pertama menunjukkan lebih banyak transparansi karena nilai opasitas warna latar belakang adalah “0. 4”. Tajuk kedua kurang transparan dibandingkan warna latar tajuk pertama karena nilai opasitasnya adalah “0. 6”. Kemudian, sama seperti heading kedua, warna background heading ketiga kurang transparan dibandingkan heading kedua. Kali ini, "opacity" adalah "0. 8”. Dan di heading terakhir, kita menggunakan warna kuning asli tanpa menggunakan nilai opacity apapun

Contoh #2

Dalam kode HTML ini, kami memiliki dua judul dan empat paragraf. Setiap paragraf ditulis di dalam kelas "div" dan kelas "div" ini masing-masing diberi nama "pertama", "kedua", dan "ketiga". Kami akan menggunakan nama div ini saat kami menata paragraf ini di CSS. Kami akan mengubah opacity warna latar belakang setiap paragraf

Kode CSS

Ini adalah kode CSS dimana kita mengatur warna heading 1 sebagai “hijau”. Teks dari heading 1 dan 2 disejajarkan di “tengah” menggunakan “text-align”. Setel warna "div" latar belakang "hijau" dengan menggunakan "RGB (0, 151, 19)". "Padding" adalah "10px" dari kiri, kanan, atas, dan bawah. "text-align" yang digunakan di sini adalah "justify". Sekarang, gunakan div pertama di mana kita mengubah warna latar hijau dengan nilai opasitas “0. 2” dan ditulis dalam bentuk “RGBA (0, 151, 19, 0. 2)”. "Nilai opacity" di sini adalah "0. 2”. Nilai "alpha" mewakili "opacity". Warna latar belakang div kedua juga hijau dengan nilai alfa “0. 4”. Nilai alfa untuk div ketiga adalah “0. 7” dengan warna hijau yang sama

Keluaran

Di sini, Anda dapat melihat bahwa paragraf pertama menunjukkan lebih banyak transparansi daripada paragraf kedua karena nilai alfa atau opacity untuk paragraf pertama adalah “0. 2” yang berarti memiliki opasitas “20%”. Nilai opasitas atau alfa paragraf kedua adalah “0. 4” dan kurang transparan dari paragraf pertama. Pada warna latar belakang paragraf ketiga, nilai alfa adalah “0. 7” dan Anda akan melihat bahwa itu kurang transparan. Di paragraf terakhir, warna background adalah warna “hijau” asli. Kami tidak menggunakan nilai alfa apa pun di judul terakhir

Contoh #3

Untuk contoh ketiga, kita akan menulis tajuk yang berbeda dalam HTML dengan "id" dan kemudian menggunakan "id" ini untuk memberikan gaya yang berbeda pada tajuk ini di CSS

Kode CSS

Pada kode CSS ini, kita akan mengubah opacity warna background dari satu warna dan juga menggunakan warna asli pada paragraf berikutnya. Lihat gambar berikut untuk kode CSS

Di sini, kami menggunakan id paragraf dan kemudian memberikan warna latar belakang ke semua paragraf. Untuk "p1", kami menetapkan "rbga (255, 0, 0, 0. 3)” yang merupakan kode warna “merah” dengan nilai alpha “0. 3”. Untuk "p11", kami menggunakan warna yang sama tetapi tanpa nilai alfa atau opacity. "P2" diatur sebagai "rgba (0, 255, 0, 0. 4)” yang merupakan kode warna “hijau” dan nilai alpha-nya adalah “0. 4”. Selanjutnya, "p22" memiliki warna "hijau" yang sama tanpa nilai alfa. Nilai rgba “p3” adalah “(0. 0. 225, 0. 5)” yang merupakan warna “biru” dengan nilai alfa “0. 5”. "P33" memiliki warna "biru" asli dan tidak memiliki opacity. "P5" memiliki nilai opasitas "0. 7” dan kode warnanya adalah “rgba (255, 255, 0, 0. 7)” yang mewakili “kuning”. "P55" tidak mengandung nilai alfa apa pun. Warna "p6" adalah "merah muda" dengan nilai opasitas "0. 8” dan kodenya ditulis sebagai “rgba (255, 0, 255, 0. 8)”. Paragraf terakhir, "p66", memiliki "warna latar belakang" "merah muda" tanpa opacity

Di sini, warna latar belakang paragraf pertama berwarna merah tetapi dengan nilai opacity 0. 3 yang membuatnya lebih transparan. Paragraf berikutnya berisi warna latar merah asli dan Anda dapat dengan mudah mengamati perbedaan antara warna asli dan warna saat kami menggunakan nilai opacity. Di paragraf ketiga, warna latar ditampilkan hijau dengan nilai opasitas “0. 4”. Di paragraf keempat, warna latar belakang adalah "hijau" tanpa nilai alfa. Warna “biru” pada paragraf kelima ditampilkan dan nilai opasitasnya adalah “0. 5”. Warna latar belakang "biru" asli juga ditampilkan di paragraf "keenam". Paragraf berikutnya menunjukkan warna “abu-abu” yang digunakan dengan “0. Nilai opasitas 6” dan abu-abu asli ini juga digunakan di paragraf berikutnya sebagai warna latar belakang. Warna "kuning" memiliki "0. 7" opacity sementara "cerise" memiliki "0. 8”. Kedua warna asli juga ditampilkan dalam warna latar belakang paragraf

Kesimpulan

Tutorial ini disediakan untuk Anda agar Anda dapat mempelajari konsep opasitas warna latar belakang di CSS. Kami mempelajari dua metode untuk mengubah opacity. satu dengan menggunakan properti "opacity" dan yang lainnya dengan menggunakan "rgba" di mana "alpha" digunakan untuk mengatur nilai transparansi warna latar belakang. Kami menunjukkan warna latar belakang dengan nilai opacity atau alpha dan tanpa nilai opacity secara detail. Coba contoh ini dan kemudian gunakan nilai opasitas ini dalam kode Anda

Bagaimana cara mengubah opacity hanya warna latar belakang di CSS?

Bagaimana cara menerapkan opacity ke gambar latar hanya di CSS?

Bagaimana Anda menerapkan opacity tanpa memengaruhi elemen anak?

Bagaimana cara mengubah opasitas gambar latar belakang tanpa memengaruhi teks?