Çocuk opaklığını CSS'deki ebeveynden devralmak istemiyorum

Çocuk opaklığını CSS'deki ebeveynden devralmak istemiyorum.

Ebeveyn olan bir div var ve ilk div içinde çocuk olan başka bir div var.

Üst div'de opacity özelliğini ayarlamak istiyorum, ancak alt div'in opacity özelliğini devralmasını istemiyorum.

Bunu nasıl yapabilirim?

Opaklık kullanmak yerine, rgba ile bir arka plan rengi ayarlayın; burada 'a' saydamlık düzeyidir.

Bunun yerine:

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

kullanım

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

Opaklık aslında CSS'de kalıtsal değildir. Oluşturma sonrası grup dönüşümü. Başka bir deyişle,<div> opaklık ayarlanmışsa, div ve tüm çocuklarını geçici bir arabellek haline getirirsiniz ve ardından bu arabellek verilen opaklık ayarıyla sayfaya birleştirilirsiniz.

Tam olarak burada yapmak istediğiniz şey, tam olarak aradığınız soruna bağlıdır, bu sorudan net değildir.

Diğerleri bu ve diğer benzer iş parçacıklarında belirtildiği gibi, bu sorunu önlemenin en iyi yolu RGBA / HSLA kullanmak veya başka bir şeffaf PNG kullanmaktır.

Ancak, bu konudaki başka bir cevapta (aynı zamanda benim web sitem) bağlantılı olana benzer, saçma bir çözüm istiyorsanız, burada yazdığım yeni bir komut dosyası, thatsNotYoChild.js adlı otomatik olarak giderdi:

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

Temel olarak, tüm div öğelerini ana div'den kaldırmak için JavaScript kullanır, ardından alt öğeleri artık o öğenin alt öğesi olmadan gerçekte olması gereken yere yeniden konumlandırır.

Bana göre, bu son çare olmalı, ama bunu yapmak isteyen biri varsa, bunu yapan bir şey yazmanın eğlenceli olacağını düşündüm.

Ebeveyniniz şeffafsa ve çocuğunuzun aynı olmasını, ancak münhasıran tanımlanmasını istiyorsanız (örneğin, belirli bir açılır listenin kullanıcı aracısı stillerinin üzerine yazmak için) küçük bir numara:

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

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

Alt öğenin opaklığı, üst öğeden devralınır.

Ancak başarımızı gerçekleştirmek için css position özelliğini kullanabiliriz.

Metin kabı div, ana div'ın dışına yerleştirilebilir, ancak mutlak konumlandırma ile istenen efekti yansıtır.

İdeal Gereksinim ------------------ >>>>>>>>>>>>

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;

               }

Çıktı:--

üst div'den opaklığı devraldığı için Metin görünmüyor.

Çözüm ------------------- >>>>>>

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;  
               }

Çıktı :

div saydam div'da olmadığından Metin arka planla aynı renkle görünür

Soru, arka planın bir renk veya görüntü olup olmadığını tanımlamadı, ancak @Blowski renkli arka planlar için zaten yanıt verdiğinden, aşağıdaki resimler için bir kesmek var:

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

Bu şekilde opaklığınızın rengini değiştirebilir ve hatta güzel degrade efektleri ekleyebilirsiniz.

.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>

display: blockÖğe, display: inlineebeveynlerden opaklığı miras almıyor gibi görünüyor .

Codepen örneği

Belki geçersiz işaretleme ve tarayıcı gizlice onları ayırdığı için? Çünkü kaynak bunu göstermiyor. Bir şey mi kaçırıyorum?

Yukarıdaki cevaplar benim için karmaşık görünüyor, bu yüzden şunu yazdım:

#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-overlay(opaklık) ebeveyniniz, (opaklık pop-upyok) çocuklarınız. Aşağıdaki her şey sitenizin geri kalanıdır.

Herkese uyan tek bir yaklaşım yoktur, ancak özellikle yararlı bulduğum bir şey, bir div'in doğrudan çocukları için opaklığı ayarlamaktır, ancak tamamen görünür tutmak istediğiniz şey hariç. Kodda:

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

ve css:

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

Üst öğede arka plan renkleri / görüntüleri varsa, alfa filtreleri uygulayarak rgba ve arka plan görüntüsü ile renk opaklığını düzeltirsiniz

Bir görüntüyü saydam arka plan olarak kullanmanız gerekiyorsa, sözde bir öğe kullanarak etrafında çalışabilirsiniz:

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%;
}

Cevabım statik ebeveyn-çocuk düzeni ile ilgili değil, animasyonlarla ilgili.

Bugün bir svg demosu yapıyordum ve svg'nin div içinde olması gerekiyordu (çünkü svg, ebeveynin div genişliği ve yüksekliği ile oluşturuldu, etraftaki yolu canlandırmak için) ve bu üst div, svg yolu animasyonu sırasında görünmez olmalı (ve sonra bu div olması gerekiyordu animate opacity from 0 to 1, bu en önemli kısım). Ve ana div ile opacity: 0benim svg gizleme, ben visibilityseçeneği ile bu kesmek geldi (ile çocuk ile visibility: visibleebeveyn içinde görülebilir 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;
}

Ve sonra, js'de, .invisiblezaman aşımı işleviyle sınıfı kaldırır, sınıf ekler .opacity-zero, düzeni benzer bir şeyle tetikler whatever.style.top;ve .opacity-zerosınıfı kaldırırsınız .

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

Bu demosu kontrol etmek daha iyi http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

Mac'te , .css dosyasına yerleştirmeden önce .png resminizin üzerine yerleştirilmiş beyaz bir dikdörtgene opaklık uygulamak için Önizleme düzenleyicisini kullanabilirsiniz .

1) Görüntü
Logo

2) görüntü etrafında bir dikdörtgen oluşturun
logo çevresinde Rectanle

beyaza 3) Arka plan rengini değiştirin
dikdörtgen beyaz döndü

4) dikdörtgen donukluk ayarlayın
opak görüntü

Aşağıdakilerle çocuğa opaklık 1.0 atayın:

div > div { opacity: 1.0 }

Misal:

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>

Bir tablo (veya bir şey) opaklık kullanarak bir satıra odaklanmış görünmeye çalışan diğer insanlar için. @Blowski'nin dediği gibi kullanım opaklık değil renk. Bu kemanı kontrol et: http://jsfiddle.net/2en6o43d/

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