Hai saya sedang mencari di google tetapi saya tidak dapat menemukan jawaban yang sempurna
Saya ingin Opacity di orangtua DIV tetapi tidak DIV anak
Contoh
HTML
<div class="parent"> <div class="child"> Hello I am child </div> </div>Css
.parent{ background:url('../images/madu.jpg') no-repeat 0 0; } .child{ Color:black; }Catatan: - Saya ingin background-image di Parent Div bukan Warna
Mungkin lebih baik jika Anda mendefinisikan gambar latar belakang Anda di kelas pseudo :after. Tulis seperti ini:
.parent{ width:300px; height:300px; position:relative; border:1px solid red; } .parent:after{ content:''; background:url('//www.dummyimage.com/300x300/000/fff&text=parent+image'); width:300px; height:300px; position:absolute; top:0; left:0; opacity:0.5; } .child{ background:yellow; position:relative; z-index:1; }Lihat ini biola
Saya tahu ini sudah tua, tapi kalau-kalau itu akan membantu orang lain.
<div style="background-color: rgba(255, 0, 0, 0.5)">child</div>Di mana rgba adalah: merah, hijau, biru, dan a adalah untuk transparansi.
Anda dapat melakukannya dengan elemen-semu: ( demo di dabblet.com )
markup Anda:
<div class="parent"> <div class="child"> Hello I am child </div> </div>css:
.parent{ position: relative; } .parent:before { z-index: -1; content: ''; position: absolute; opacity: 0.2; width: 400px; height: 200px; background: url('//img42.imageshack.us/img42/1893/96c75664f7e94f9198ad113.png') no-repeat 0 0; } .child{ Color:black; }Seperti yang disebutkan oleh Tom, background-color: rgba(229,229,229, 0.85) dapat melakukan triknya. Tempatkan itu pada gaya elemen induk dan anak tidak akan terpengaruh.
Kamu tidak bisa Css hari ini tidak mengizinkannya.
Model rendering logis adalah ini:
Jika objek adalah elemen wadah, maka efeknya adalah seolah-olah isi dari elemen wadah dicampur dengan latar belakang saat ini menggunakan topeng di mana nilai setiap piksel topeng adalah.
Referensi: transparansi css
Solusinya adalah dengan menggunakan komposisi elemen yang berbeda, biasanya menggunakan posisi tetap atau dihitung untuk apa yang saat ini didefinisikan sebagai anak: itu mungkin muncul secara logis dan visualy untuk pengguna sebagai anak tetapi elemen tidak harus benar-benar menjadi anak di kode Anda.
Solusi menggunakan css: biola
.parent { width:500px; height:200px; background-image:url('//canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%C3%AAte-011.jpg'); opacity: 0.2; } .child { position: fixed; top:0; }Solusi lain dengan javascript: biola
Anda tidak dapat melakukan itu, kecuali jika Anda mengeluarkan anak dari orang tua dan menempatkannya melalui pemosisian.
Satu-satunya cara saya tahu dan itu benar-benar berfungsi, adalah menggunakan gambar translucid (.png dengan transparansi) untuk latar belakang orangtua. Satu-satunya kelemahan adalah bahwa Anda tidak dapat mengontrol opacity melalui CSS, selain itu berfungsi!
- Cari disini...
- Courses
Kategori
Web Development
Mobile Development
Studi Kasus
Fundamental
Pemula
Teknologi Populer
Laravel
PHP
Kotlin
Android
Javascript
Wordpress
Database
Semua Kelas
Flashsale
Popular
Mentor
Roadmap
- Explore
Karir
Temukan Karirmu
Tutorial & Artikel
Temukan Artikel menarik
Podcast
Podcast seputar pemrograman
Webinar
Ikuti Berbagai Webinar
Event
Temukan Event menarik
Beasiswa
Program Beasiswa
Discord
Komunitas Discord
Forum
Diskusi antar Programmer
Leaderboard
Ranking siswa Codepolitan
- Partnership
For Company
Solusi tepat untuk perusahaan
For School
Kerjasama untuk sekolah
For Campus
Kerjasama untuk kampus
For Mentor
Peluang penghasilan untuk mentor
LoginRegister