Opasitas latar belakang css tanpa memengaruhi teks

Cara paling sederhana untuk membuat latar belakang transparan, tanpa memengaruhi elemen anak mana pun, adalah dengan menggunakan fungsi rgba. Ini hanya memengaruhi warna itu sendiri dan memiliki dukungan luar biasa di antara browser

background-color: rgba(255, 0, 0, 0.3);

Argumen ke-4 dan terakhir dari fungsi ini menentukan opasitas warna, dengan 1 sepenuhnya buram dan 0 sepenuhnya transparan

Untuk mengubah opacity gambar background tanpa mempengaruhi teks, kita harus menulis beberapa kode HTML dan mengubah opacity pada kode CSS. Kami menggunakan kode studio visual untuk melakukan contoh-contoh ini. Jadi, kami membuka file baru di perangkat lunak ini dan memilih bahasa "HTML", dan file HTML dibuat. Kemudian, kami mulai membuat kode di file ini. Setelah menyelesaikan kode kami, kami menyimpannya, dan ". html” ekstensi file secara otomatis menghasilkan nama file ini

Kami membuat kelas "div" "demo-wrap" menggunakan tag gambar. Kelas gambar yang kami gunakan adalah "img-bg". Sekarang, kita harus mengatur gambar di latar belakang, jadi kita gunakan "background-img src" dan beri nama gambar yang ingin kita tampilkan sebagai gambar latar belakang. Di sini, kami mengatur “pemandangan. jpg” sebagai gambar latar belakang. Kami juga memiliki "div" lain di dalam div pertama, dan nama div ini adalah "teks". Dan, di div kedua, kita memiliki judul "h1" dan ketikkan judul di "div" ini. Kemudian, tutup kedua tag “div”.

Kode CSS

Dalam kode CSS yang diberikan, kami mengubah opasitas gambar latar belakang, tetapi tajuk teks yang kami tulis pada gambar ini tetap sama. Opasitas gambar latar belakang tidak mengubah opasitas teks

Kami menggunakan "img-bg", yang merupakan nama kelas gambar, dan mengatur opasitas gambar sebagai "0. 4”. Kami menyetel "posisi" gambar latar belakang ke "absolut". "kiri" dan "atas" keduanya disetel ke "0". "Lebar" yang kita atur di sini adalah "100%" untuk gambar latar belakang, dan "tinggi" adalah "otomatis". Selanjutnya, kami mendesain teks kami saat kami menyelaraskannya di "pusat" dan mengatur "font-family" ke "Aljazair". Kami menggunakan "hitam" sebagai warna font

Keluaran

Anda dapat melihat bahwa gambar di latar belakang tidak sesuai dengan warna aslinya karena kami menggunakan “0. Opasitas 4” pada gambar latar belakang ini. Namun, tidak ada efek pada teks yang tertulis pada gambar. Dengan cara ini, kita dapat mengubah opasitas gambar tanpa memengaruhi teks

Contoh #2

Dengan mengubah kode HTML sebelumnya, kami membuat contoh lain. Tapi kali ini, kami menambahkan gambar menggunakan properti CSS

File ini mendefinisikan dua judul di kelas "div". Kami memiliki "h1" dan "h2" di kelas div bernama "hero" dalam kode ini. Kami akan menambahkan gambar latar belakang dalam kode CSS yang diberikan di bawah ini

Kode CSS

Posisi "pahlawan" kelas div adalah "relatif", tingginya "90vh", dan lebarnya "90%". Tampilan untuk div class "hero" ini adalah "flex", item di "center", dan "justify-content" ke "center". “. sebelum" adalah "pseudo-selector" yang digunakan untuk menempatkan gambar latar belakang sebelum elemen yang dipilih. Kami menempatkan "konten", mengatur "gambar latar belakang" menggunakan "URL", dan memasukkan nama gambar di URL ini. "Ukuran latar belakang" menyetel gambar latar belakang menjadi "menutupi", dan "posisinya" adalah "mutlak". Kemudian "atas", "bawah", "kiri", dan "kanan" semuanya "0px". Di sini, kami mengubah "opacity" menjadi "0. 4”. Sekarang, kami menerapkan gaya ke judul. Judul "posisi" yang kami atur adalah "relatif". Warna tajuk adalah "merah". Ukuran heading ini adalah “25px”, dan “line-height” adalah “0. 9”. Kami menyelaraskan tajuk ini ke "tengah". Warna judul kedua adalah "hitam"

Keluaran

Di sini, gambar latar belakang tidak muncul dalam warna aslinya karena kami telah mengatur opasitas gambar dalam kode CSS. Tetapi teks pada gambar muncul dalam warna aslinya

Contoh #3

Kami membuat file HTML lain. Dalam kode ini, kami membuat tiga paragraf di dalam kelas div, dan kelas div yang kami buat diberi nama "imageOpc"

Kode CSS

Kami akan memasukkan gambar latar belakang dalam kode CSS. Jadi, kami menggunakan pseudo-selector "before", yang telah kami hilangkan pada contoh sebelumnya. Di sini, kodenya sama seperti pada contoh kedua, tetapi kami mengubah gambar latar belakang dan menggunakan properti "opacity" pada gambar yang berbeda. Di sini, "kiri", "kanan", "bawah", dan "atas" semuanya disetel ke "0". Dan “0. 4” dari opacity digunakan untuk gambar ini. Kami mengatur paragraf di posisi "relatif". Dan atur tingginya sama dengan “0. 9px”. Kami juga mengubah "ukuran font" paragraf dan mengaturnya menjadi "25px". Font-family "Aljazair" digunakan untuk paragraf. Dan kami menetapkan "200px" teratasnya

Keluaran

Anda dapat melihat bahwa gambar latar menunjukkan beberapa transparansi. Di sini, kami menggunakan opasitas 40% pada gambar latar belakang ini, tetapi Anda mungkin memperhatikan bahwa itu tidak memengaruhi teks yang tertulis pada gambar latar belakang

Contoh #4

Kami membuat sedikit perubahan pada kode HTML sebelumnya. Dalam contoh ini, kami menggunakan empat paragraf di dalam nama "div" dan "givegivingageOpc" untuk kelas div ini

Kode CSS

Kode CSS ini sama dengan kode sebelumnya. Namun, kami mengubah "URL" dari gambar latar belakang. Kami menggunakan "latar belakang-pemandangan. jpg” di sini. Ingat bahwa Anda menggunakan ekstensi gambar yang benar dengan nama gambar. Anda harus meletakkan jalur gambar yang benar di "URL" ini. Kami menggunakan “0. Nilai 5” untuk opasitas gambar latar belakang dalam contoh ini. "Ukuran font" yang kami gunakan adalah "30px" dalam contoh paragraf ini. Kami mengatur font-family paragraf ke "Times New Roman", dan di atasnya adalah "200px". Paragraf muncul di "maroon" dan "lebih tebal" di "font-weight"

Keluaran

Gambar latar belakang ini menunjukkan opasitas 50% saat kami menetapkan nilainya ke “0. 5", tetapi teksnya tetap sama. Nilai opacity ini tidak berlaku untuk teks

Kesimpulan

Kami telah menyajikan panduan ini di mana kami mengubah opasitas gambar latar belakang tanpa memengaruhi teks. Dengan demikian, Anda dapat menentukan cara mengubah opasitas gambar latar belakang di CSS tanpa memengaruhi teks. Kami telah menjelaskan dan menunjukkan berbagai contoh di mana kami menggunakan properti "opacity" untuk mengubah opacity gambar latar belakang, tetapi teksnya tetap sama. Setelah mempelajari panduan ini, Anda dapat menyisipkan gambar latar belakang dalam proyek Anda dan mengatur opasitas gambar latar belakang tanpa memengaruhi teks menggunakan properti CSS

Bagaimana cara mengatur opacity ke latar belakang hanya di CSS?

Bagaimana Anda mengatur opacity tanpa memengaruhi elemen anak?

Bagaimana cara mengurangi opasitas warna latar belakang di CSS?

Bagaimana cara menghapus opacity di CSS?