CSSで親から子の不透明度を継承したくない

CSSで親から子の不透明度を継承したくありません。

親である1つのdivがあり、最初のdivの中に子である別のdivがあります。

親divにopacityプロパティを設定したいのですが、子divにopacityプロパティを継承させたくありません。

どうやってやるの？

不透明度を使用する代わりに、rgbaで背景色を設定します。ここで、「a」は透明度のレベルです。

だから代わりに：

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

使用する

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

CSSでは、不透明度は実際には継承されません。これは、レンダリング後のグループ変換です。つまり、a <div>に不透明度が設定されている場合、divとそのすべての子を一時バッファーにレンダリングし、そのバッファー全体を、指定された不透明度設定でページに合成します。

ここで正確に何をしたいかは、探している正確なレンダリングによって異なりますが、質問からは明らかではありません。

他の人がこのスレッドや他の同様のスレッドで述べたように、この問題を回避する最善の方法は、RGBA / HSLAを使用するか、透明なPNGを使用することです。

しかし、このスレッド（これも私のWebサイトです）の別の回答にリンクされているものと同様に、とんでもないソリューションが必要な場合は、この問題を自動的に修正する筆記済みの新しいスクリプト、thatsNotYoChild.jsを次に示します。

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

基本的には、JavaScriptを使用してすべての子を親divから削除し、子要素を実際にはその要素の子ではなく、本来あるべき位置に再配置します。

私にはこれが最後の手段になるはずですが、誰かがこれをしたいのなら、これを行う何かを書くのは楽しいだろうと思いました。

親が透過的で、子供を同じにしたいが、排他的に定義したい場合のちょっとしたトリック（たとえば、選択ドロップダウンのユーザーエージェントスタイルを上書きするため）：

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

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

子要素の不透明度は親要素から継承されます。

しかし、css位置プロパティを使用して、達成することができます。

テキストコンテナーdivは、親divの外側に置くことができますが、絶対的な配置により、望ましい効果が投影されます。

理想的な要件------------------ >>>>>>>>>>>>

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;

               }

出力： -

親divから不透明度を継承しているため、テキストは表示されません。

解決策------------------- >>>>>>

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

出力：

divが透明なdivにないため、テキストは背景と同じ色で表示されます

背景が色であるか画像であるかは質問では定義されていませんが、@ Blowskiはすでに色付きの背景について回答しているため、以下の画像のハックがあります。

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

このようにして、不透明度の色を操作したり、グラデーション効果を追加したりできます。

.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要素はdisplay: inline親から不透明度を継承しないようです。

コードペンの例

多分それは無効なマークアップであり、ブラウザーがそれらを密かにそれらを分離しているからでしょうか？ソースがそのことを示していないからです。何か不足していますか？

上記の答えは私には複雑に思われるので、私はこれを書きました：

#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それはあなたの（不透明度）親であり、あなたの（不透明度pop-upなし）子供です。その下のすべてがサイトの残りの部分です。

1つのサイズですべてに対応できるアプローチはありませんが、特に役立つと感じたのは、divの直接の子に不透明度を設定することです。ただし、完全に表示したいものは除きます。コードで：

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

およびcss：

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

親に背景色/画像がある場合は、アルファフィルターを適用してrgbaとbackground-imageで色の不透明度を修正します

画像を透明な背景として使用する必要がある場合は、疑似要素を使用して画像を回避できる場合があります。

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

私の答えは、静的な親子レイアウトではなく、アニメーションについてです。

私は今日svgデモを行っていましたが、svgがdiv内にある必要があり（svgは親のdivの幅と高さで作成されているため、パスをアニメーション化します）、この親divはsvgパスアニメーション中に非表示にする必要がありました（そしてこのdivは想定されていましたがanimate opacity from 0 to 1、これが最も重要な部分です）。そして、親のdiv opacity: 0が私のsvgを隠していたので、私はこのハックにvisibilityオプションで遭遇しました（子のはvisibility: visible親の中にで見ることができます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;
}

そして、jsで、あなた.invisibleはタイムアウト関数でクラスを削除し、クラスを追加.opacity-zeroし、何かのようなものでレイアウトをトリガーし、クラスwhatever.style.top;を削除し.opacity-zeroます。

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

このデモを確認することをお勧めしますhttp://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

Macでは、プレビューエディターを使用して、.png画像に重ねた白い長方形に不透明度を適用してから、.cssに配置できます。

1）画像
ロゴ

2）画像の周囲の矩形の作成
ロゴの周りRectanle

）3を変更背景色を白色に
矩形白点灯

4）長方形不透明度調整
不透明画像を

次のようにして、不透明度1.0を子に再帰的に割り当てます。

div > div { opacity: 1.0 }

例：

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>

テーブル（または何か）を不透明度を使用して1つの行に焦点を当てて見えるようにしようとする他の人々のために。@Blowskiが言ったように、不透明度ではなく色を使用します。このフィドルをチェックしてください：http : //jsfiddle.net/2en6o43d/

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