Cara menggunakan css class parent child

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('http://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('http://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('http://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

Apa fungsi class pada CSS?

Berapa selector CSS?

Apa itu CSS selector dan contohnya?

Apa itu property dalam CSS?