Saya tidak ingin mewarisi opacity anak dari orang tua di CSS

Saya tidak ingin mewarisi opacity anak dari orang tua di CSS.

Saya memiliki satu div yang merupakan orangtua, dan saya memiliki div lain di dalam div pertama yang adalah anak.

Saya ingin mengatur properti opacity di div induk, tapi saya tidak ingin div anak mewarisi properti opacity.

Bagaimana saya bisa melakukan itu?

Alih-alih menggunakan opacity, atur warna latar belakang dengan rgba, di mana 'a' adalah tingkat transparansi.

Jadi alih-alih:

background-color: rgb(0,0,255); opacity: 0.5;

menggunakan

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

Opacity sebenarnya tidak diwariskan dalam CSS. Ini adalah transformasi grup pasca-perenderan. Dengan kata lain, jika <div>opacity membuat Anda merender div dan semua anak-anaknya menjadi buffer sementara, dan kemudian menggabungkan seluruh buffer itu ke halaman dengan pengaturan opacity yang diberikan.

Apa yang ingin Anda lakukan di sini tergantung pada perenderan yang Anda cari, yang tidak jelas dari pertanyaan.

Seperti orang lain telah sebutkan di thread ini dan yang serupa lainnya, cara terbaik untuk menghindari masalah ini adalah dengan menggunakan RGBA / HSLA atau menggunakan PNG transparan.

Tetapi, jika Anda menginginkan solusi konyol, mirip dengan yang ditautkan di jawaban lain di utas ini (yang juga merupakan situs web saya), inilah skrip baru yang saya tulis yang memperbaiki masalah ini secara otomatis, yang disebut thatsNotYoChild.js:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Pada dasarnya ia menggunakan JavaScript untuk menghapus semua anak dari div induk, lalu memposisikan ulang elemen anak ke tempat seharusnya tanpa menjadi anak-anak dari elemen itu lagi.

Bagi saya, ini harus menjadi pilihan terakhir, tetapi saya pikir akan menyenangkan untuk menulis sesuatu yang melakukan ini, jika ada yang mau melakukan ini.

Sedikit trik jika orangtua Anda transparan dan Anda ingin anak Anda sama, tetapi didefinisikan secara eksklusif (misalnya untuk menimpa gaya agen pengguna dari dropdown pilih):

.parent {
     background-color: rgba(0,0,0,0.5);
}

.child {
     background-color: rgba(128,128,128,0);
}

Opacity elemen anak diwarisi dari elemen induk.

Tetapi kita dapat menggunakan properti posisi css untuk mencapai pencapaian kita.

Div wadah teks dapat diletakkan di luar div induk tetapi dengan memposisikan absolut memproyeksikan efek yang diinginkan.

Persyaratan Ideal ------------------ >>>>>>>>>>>>

HTML

            <div class="container">       
              <div class="bar">
                  <div class="text">The text opacity is inherited   from the parent div    </div>
              </div>
            </div>

CSS

               .container{
                position:relative;
                                   }
           .bar{
               opacity:0.2;
               background-color:#000;
               z-index:3;
               position:absolute;
               top:0;
               left:0;
              }

              .text{
                color:#fff;

               }

Keluaran:--

Teks tidak terlihat karena mewarisi opacity dari div induk.

Solusi ------------------- >>>>>>

HTML

       <div class="container">  
         <div class="text">Opacity is not inherited from parent div "bar"</div>
         <div class="bar"></div>
       </div>

CSS

               .container{
                position:relative;
                                   }
           .bar{
               opacity:0.2;
               background-color:#000;
               z-index:3;
               position:absolute;
               top:0;
               left:0;
              }

              .text{
                color:#fff;
                z-index:3;
                position:absolute;
               top:0;
               left:0;  
               }

Keluaran:

Teks terlihat dengan warna yang sama dengan latar belakang karena div tidak dalam transparan

Pertanyaannya tidak menentukan apakah latar belakangnya berwarna atau gambar tetapi karena @Blowski sudah menjawab untuk latar belakang berwarna, ada peretasan untuk gambar di bawah ini:

background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');

Dengan cara ini Anda dapat memanipulasi warna opacity Anda dan bahkan menambahkan efek gradien yang bagus.

.wrapper {
  width: 630px;
  height: 420px;
  display: table;
  background: linear-gradient(
    rgba(0,0,0,.8), 
    rgba(0,0,0,.8)), 
    url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
 }

h1 {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  }

<div class="wrapper">
<h1>Question 5770341</h1>
</div>

Tampaknya display: blockelemen tidak mewarisi keburaman dari display: inlineorang tua.

Contoh codepen

Mungkin karena markup tidak valid dan browser memisahkan mereka secara diam-diam? Karena sumber tidak menunjukkan hal itu terjadi. Apakah saya melewatkan sesuatu?

Jawaban di atas tampaknya rumit bagi saya, jadi saya menulis ini:

#kb-mask-overlay { 
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%; 
    z-index: 10000;
    top: 0; 
    left: 0; 
    position: fixed;
    content: "";
}

#kb-mask-overlay > .pop-up {
    width: 800px;
    height: 150px;
    background-color: dimgray;
    margin-top: 30px; 
    margin-left: 30px;
}

span {
  color: white;
}

<div id="kb-mask-overlay">
  <div class="pop-up">
    <span>Content of no opacity children</span>
  </div>
</div>
<div>
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.

Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu. 
 </p>
</div>

kb-mask-overlayitu adalah orangtua Anda (opacity), pop-upitu adalah anak-anak Anda (tanpa opacity). Segala sesuatu di bawah ini adalah sisa situs Anda.

Tidak ada satu ukuran yang cocok untuk semua pendekatan, tetapi satu hal yang saya temukan sangat membantu adalah mengatur opacity untuk anak-anak langsung div, kecuali untuk yang Anda ingin tetap terlihat sepenuhnya. Dalam kode:

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
</div>

dan css:

div.parent > div:not(.child1){
    opacity: 0.5;
}

Jika Anda memiliki warna latar belakang / gambar pada induk Anda memperbaiki opacity warna dengan rgba dan gambar latar belakang dengan menerapkan filter alpha

Jika Anda harus menggunakan gambar sebagai latar belakang transparan, Anda mungkin bisa mengatasinya menggunakan elemen pseudo:

html

<div class="wrap"> 
   <p>I have 100% opacity</p>  
</div>

css

.wrap, .wrap > * {
  position: relative;
}
.wrap:before {
  content: " ";
  opacity: 0.2;
  background: url("http://placehold.it/100x100/FF0000") repeat;     
  position: absolute;
  width: 100%;
  height: 100%;
}

Jawaban saya bukan tentang tata letak orangtua-anak statis, ini tentang animasi.

Saya sedang melakukan demo svg hari ini, dan saya membutuhkan svg untuk berada di dalam div (karena svg dibuat dengan lebar dan tinggi div orang tua, untuk menghidupkan jalur), dan div induk ini perlu tidak terlihat selama animasi path svg (dan kemudian div ini seharusnya animate opacity from 0 to 1, itu bagian terpenting). Dan karena div induk dengan opacity: 0menyembunyikan svg saya, saya menemukan hack ini dengan visibilityopsi (anak dengan visibility: visibledapat dilihat di dalam orangtua dengan visibility: hidden):

.main.invisible .test {
  visibility: hidden;
}
.main.opacity-zero .test {
  opacity: 0;
  transition: opacity 0s !important;
}
.test { // parent div
  transition: opacity 1s;
}
.test-svg { // child svg
  visibility: visible;
}

Dan kemudian, di js, Anda menghapus .invisiblekelas dengan fungsi timeout, menambahkan .opacity-zerokelas, memicu tata letak dengan sesuatu seperti whatever.style.top;dan menghapus .opacity-zerokelas.

var $main = $(".main");
  setTimeout(function() {
    $main.addClass('opacity-zero').removeClass("invisible");
    $(".test-svg").hide();
    $main.css("top");
    $main.removeClass("opacity-zero");
  }, 3000);

Lebih baik untuk memeriksa demo ini http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

Pada mac Anda dapat menggunakan editor Pratinjau untuk menerapkan opacity ke kotak putih yang diletakkan di atas gambar .png Anda sebelum Anda memasukkannya ke dalam .css Anda.

1)
Logo Gambar

2) Buat persegi panjang di sekitar gambar
Rectanle sekitar logo

3) Ubah warna latar belakang menjadi
persegi panjang putih menjadi putih

4) Sesuaikan gambar opacity persegi panjang
opak

Tetapkan opacity 1.0 ke anak secara rekursif dengan:

div > div { opacity: 1.0 }

Contoh:

div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }

<div style="background-color: #f00; padding:20px;">
  <div style="background-color: #0f0; padding:20px;">
    <div style="background-color: #00f; padding:20px;">
      <div style="background-color: #000; padding:20px; color:#fff">
         Example Text - No opacity definition
      </div>
    </div>  
  </div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
  <div style="opacity:0.5; background-color: #0f0; padding:20px;">
    <div style="opacity:0.5; background-color: #00f; padding:20px;">
      <div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
        Example Text - 50% opacity inherited
      </div>
    </div>  
  </div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
  <div class="x" style="background-color: #0f0; padding:20px;">
    <div class="x" style="background-color: #00f; padding:20px;">
      <div class="x" style="background-color: #000; padding:20px; color:#fff">
         Example Text - 50% opacity not inherited
      </div>
    </div>  
  </div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
  Example Text - 50% opacity
</div>

Untuk orang lain mencoba membuat tabel (atau sesuatu) terlihat fokus pada satu baris menggunakan opacity. Seperti @Blowski mengatakan gunakan warna bukan opacity. Lihat biola ini: http://jsfiddle.net/2en6o43d/

.table:hover > .row:not(:hover)