Tidak ada properti background-opacity_ di CSS, tetapi Anda dapat memalsukannya dengan memasukkan elemen semu dengan opacity reguler dengan ukuran persis elemen di belakangnya
div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: ""; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
Saat membuat situs web, Anda mungkin sering ingin menempatkan gambar latar belakang pada HTML <div> yang juga berisi teks atau konten lainnya
Dan untuk menonjolkan teks, Anda ingin mengubah opasitas gambar latar tersebut di CSS sehingga menjadi semi-transparan. Tapi Anda sudah mencobanya, dan Anda tidak bisa mengubah opasitas gambar latar belakang tanpa juga mempengaruhi teks atau elemen turunan lainnya
Apa yang bisa kau lakukan?
Jadi, pertama, kabar buruknya…
Tidak ada properti CSS yang dapat Anda gunakan untuk mengubah opasitas gambar latar saja
Tidak seperti warna latar belakang, yang memungkinkan Anda menyesuaikan saluran alfa untuk mengontrol opasitas, warna tersebut tidak ada untuk properti background-image . Mungkin suatu hari nanti?
Sementara itu, mari kita lihat mengapa mengubah opasitas akan memengaruhi teks atau konten lain dalam elemen tersebut. Kemudian kami akan membahas solusi yang dapat Anda gunakan
Perubahan opasitas pada induk akan diwariskan ke elemen anak
Misalnya, Anda memiliki elemen div dengan beberapa teks di dalamnya, dan Anda telah menyetel background-image pada elemen induk .hero
<div class="hero"> <h1>Cute kittehs everywhere!</h1> </div> _Kemudian Anda menyesuaikan opacity induk untuk mencoba membuat gambar latar semi transparan, seperti ini
.hero { background-image: url('//placekitten.com/1200/800'); opacity: 0.75; }Opacity secara otomatis diwariskan oleh elemen anak, jadi ketika Anda menyesuaikan opacity dari elemen induk, itu akan mempengaruhi semua elemen anak di lapisan induk tersebut. (Ini mirip dengan bagaimana juga diwariskan. )
Jadi Anda akan berakhir dengan semua elemen, baik gambar latar dan teks, memiliki opasitas yang berkurang
Larutan. Letakkan gambar latar belakang ke dalam elemen semu induk
Untuk memperbaiki masalah ini, kita perlu menempatkan gambar latar belakang ke elemen anak dari induknya. Ini akan memastikan bahwa gambar latar belakang dan konten teks akan berada di "lapisan" mereka sendiri di induknya. Anda kemudian dapat mengontrol opasitas setiap lapisan tanpa mempengaruhi satu sama lain
Salah satu pendekatan yang dapat Anda gunakan adalah menempatkan gaya background-image dalam elemen pseudo elemen induk
.hero { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; } .hero::before { content: ""; background-image: url('//placekitten.com/1200/800'); background-size: cover; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.75; } h1 { position: relative; color: #ffffff; font-size: 14rem; line-height: 0.9; text-align: center; }Karena elemen pseudo adalah semacam anak dari induk, Anda dapat mengubah opasitasnya tanpa memengaruhi konten teks
Untuk membuat elemen semu itu berukuran sama dengan induknya, Anda harus benar-benar memposisikannya dan menyetel nilai atas, kanan, bawah, dan kirinya ke nol agar tidak runtuh. Selain itu, sebagai elemen semu, ia harus memiliki content properti yang ditetapkan, jika tidak, ia tidak akan muncul di halaman
(Anda juga dapat menempatkan gambar latar belakang ke dalam elemen turunannya sendiri, tetapi menggunakan elemen semu membantu menjaga agar HTML tetap disederhanakan. )
Kemudian untuk teks, yang ada di tag .hero { background-image: url('//placekitten.com/1200/800'); opacity: 0.75; }0 , Anda harus menyetelnya ke .hero { background-image: url('//placekitten.com/1200/800'); opacity: 0.75; }1 agar berada di atas elemen semu dan gambar latar belakang. Jika Anda tidak menyetel properti .hero { background-image: url('//placekitten.com/1200/800'); opacity: 0.75; }2 secara eksplisit, properti tersebut akan disembunyikan di bawah elemen semu yang benar-benar diposisikan di
Terakhir, jangan lupa untuk menyetel orang tua ke .hero { background-image: url('//placekitten.com/1200/800'); opacity: 0.75; }1 untuk menjaga anak
Sekarang, teks akan tetap berada pada opacity default 1, dan pengaturan opacity yang dikurangi akan dibatasi pada gambar latar belakang di elemen pseudo
Saya memiliki kode untuk contoh di atas dalam Codepen— jangan ragu untuk bermain-main dengannya
Solusi alternatif. tambahkan overlay dengan pengurangan opacity dan background-color di atas gambar latar belakang
Solusi lain adalah alih-alih mengubah opasitas gambar latar belakang, Anda menambahkan overlay dengan warna latar semi-transparan di atas gambar latar belakang.
Markup HTML akan sama dengan solusi sebelumnya. Di CSS, Anda dapat mengatur gambar latar langsung di elemen induk, tanpa perubahan opacity
Elemen semu induk kemudian akan berisi warna latar semi-transparan
Hal ini dilakukan dengan menyetel properti .hero { background-image: url('//placekitten.com/1200/800'); opacity: 0.75; }4 menggunakan , dengan tiga karakter pertama adalah nomor warna RGB, dan angka terakhir adalah setelan alfa atau transparansi. Kami menggunakan .hero { background-image: url('//placekitten.com/1200/800'); opacity: 0.75; }6 untuk warna RGB, yang diterjemahkan menjadi hitam
Nilai alfa dapat berkisar dari .hero { background-image: url('//placekitten.com/1200/800'); opacity: 0.75; }_7 (0% opasitas) hingga .hero { background-image: url('//placekitten.com/1200/800'); opacity: 0.75; }8 (100% opasitas). Jadi nilai kami .hero { background-image: url('//placekitten.com/1200/800'); opacity: 0.75; }9akan menghasilkan overlay dengan opasitas 25%
Inilah yang akan terlihat seperti dalam kode
.hero { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; background-image: url('//placekitten.com/1200/800'); background-size: cover; } .hero::before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(0,0,0,0.25); }Hasilnya akan terlihat seperti ini
Dan inilah Codepen untuk solusi overlay ini
Kedua solusi memiliki hasil yang tampak sangat mirip. Solusi pertama memiliki gambar latar belakang yang diatur pada opacity 75%. Dan solusi kedua menambahkan overlay hitam pada opacity 25%. Jadi mereka tidak persis sama, tetapi mereka serupa
Solusi overlay juga berguna jika Anda ingin menambahkan warna kencang ke gambar latar belakang. Inilah tampilannya jika kita menyetel overlay .hero { background-image: url('//placekitten.com/1200/800'); opacity: 0.75; }4 ke .hero { position: relative; height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; } .hero::before { content: ""; background-image: url('//placekitten.com/1200/800'); background-size: cover; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.75; } h1 { position: relative; color: #ffffff; font-size: 14rem; line-height: 0.9; text-align: center; }1