Saat Anda menambahkan gambar latar belakang ke elemen <div>, Anda mungkin ingin mengubah opasitas gambar sehingga konten elemen <div> dapat menonjol dan lebih mudah dilihat
Misalnya, Anda memiliki badan HTML berikut
<div class="bg-doge"> <h1 class="color-white">Hello World from the Doge!</h1> </div>
Dan kemudian Anda menetapkan aturan CSS berikut untuk kelas bg-doge (gambar yang digunakan untuk contoh ini diunduh dari Unsplash)
.bg-doge { background-image: url(bg-doge.jpeg); background-size: cover; height: 600; opacity: 0.4; /* extra style to center the content */ /* you can remove them later */ display: flex; align-items: center; justify-content: center; } .color-white { color: #fff; background-color: #000; } _
Output dari kode di atas adalah sebagai berikut
Gambar latar belakang dengan opasitas
Seperti yang Anda lihat, elemen <h1> di dalam tag <div> dipengaruhi oleh properti opacity, mengubahnya menjadi transparan seperti gambar latar belakang
Ini karena properti opacity_ berlaku untuk semua yang ada di dalam elemen container. Anda tidak dapat membuat elemen anak kurang transparan dari elemen induknya
Untuk mengatasi masalah ini, Anda perlu menempatkan gambar latar belakang sebagai anak dari tag <div> dengan menggunakan pemilih elemen semu .bg-doge { background-image: url(bg-doge.jpeg); background-size: cover; height: 600; opacity: 0.4; /* extra style to center the content */ /* you can remove them later */ display: flex; align-items: center; justify-content: center; } .color-white { color: #fff; background-color: #000; } 2
Lihatlah sintaks CSS berikut
.bg-doge { position: relative; height: 600; /* extra style to center the content */ display: flex; align-items: center; justify-content: center; } .bg-doge:before { content: ""; background-image: url(bg-doge.jpeg); position: absolute; background-size: cover; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; opacity: .6; }
Pemilih semu .bg-doge { background-image: url(bg-doge.jpeg); background-size: cover; height: 600; opacity: 0.4; /* extra style to center the content */ /* you can remove them later */ display: flex; align-items: center; justify-content: center; } .color-white { color: #fff; background-color: #000; } _2 di atas digunakan untuk membuat gambar latar belakang. Posisi absolut dan nilai atas, kiri, bawah, kanan diterapkan sehingga elemen semu memiliki ukuran yang sama dengan induknya
.bg-doge { background-image: url(bg-doge.jpeg); background-size: cover; height: 600; opacity: 0.4; /* extra style to center the content */ /* you can remove them later */ display: flex; align-items: center; justify-content: center; } .color-white { color: #fff; background-color: #000; } 4 elemen semu diatur ke .bg-doge { background-image: url(bg-doge.jpeg); background-size: cover; height: 600; opacity: 0.4; /* extra style to center the content */ /* you can remove them later */ display: flex; align-items: center; justify-content: center; } .color-white { color: #fff; background-color: #000; } 5 untuk memposisikannya di bagian bawah pesanan. Tanpa .bg-doge { background-image: url(bg-doge.jpeg); background-size: cover; height: 600; opacity: 0.4; /* extra style to center the content */ /* you can remove them later */ display: flex; align-items: center; justify-content: center; } .color-white { color: #fff; background-color: #000; } _4 properti, itu akan ditempatkan di atas elemen lain, menghalangi tampilan konten
Terakhir, posisi .bg-doge { background-image: url(bg-doge.jpeg); background-size: cover; height: 600; opacity: 0.4; /* extra style to center the content */ /* you can remove them later */ display: flex; align-items: center; justify-content: center; } .color-white { color: #fff; background-color: #000; } _7 diatur ke .bg-doge { background-image: url(bg-doge.jpeg); background-size: cover; height: 600; opacity: 0.4; /* extra style to center the content */ /* you can remove them later */ display: flex; align-items: center; justify-content: center; } .color-white { color: #fff; background-color: #000; } 8 sehingga elemen semu terkandung di dalam <div>
Outputnya adalah sebagai berikut
Opasitas gambar latar diperbaiki menggunakan elemen semu
Sekarang transparansi gambar latar belakang tidak akan diterapkan pada konten tag <div>
Selain itu, Anda juga dapat menyetel gambar latar belakang menjadi transparan hanya saat kursor diarahkan ke elemen dengan menggunakan sintaks CSS berikut