我不想繼承CSS中父級的子級不透明度

Question

我不想從CSS中的父級繼承子級不透明度。

我有一個div是父母，我有另一個div裏面的第一個div是孩子。

我想在父div中設置opacity屬性，但我不希望子div繼承opacity屬性。

我該怎麼做？

Answer 1

不使用不透明度，而是使用rgba設置背景色，其中'a'是透明度級別。

所以不是：

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

使用

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

Answer 2

透明度不CSS實際上繼承。這是一個後渲染組變換。換句話說，如果<div>設置了不透明度，則將div及其所有孩子渲染到臨時緩衝區，然後將該整個緩衝區複合到具有給定不透明度設置的頁面中。

你究竟想在這裏做什麼取決於你正在尋找的確切的渲染，這是不明確的問題。

Answer 3

正如其他人已經在這個和其他類似的線程中提到的，避免這個問題的最好方法是使用RGBA/HSLA或使用透明的PNG。但是，如果你想要一個荒謬的解決方案，類似於在這個線程（這也是我的網站）的另一個答案中鏈接的解決方案，這裏是我寫的一個全新的腳本，自動修復了這個問題，名爲thatsNotYoChild.js：

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

基本上它使用JavaScript來從父DIV中刪除所有的孩子，然後重新定位的子元素回到它們應該在哪裏，而不該元素的實際上是孩子了。

對我來說，這應該是最後一招，但我認爲寫這樣做會很有趣，如果有人想這樣做。

Answer 4

如果你有使用圖片作爲背景透明，你也許可以使用僞元素來解決它：

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

Answer 5

對於其他人試圖製作一張桌子（或其他東西）看起來專注於使用不透明度的一行。就像@Blowski所說的使用顏色不是不透明的。看看這個小提琴：http://jsfiddle.net/2en6o43d/

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

Answer 6

我的回答是不是靜態的親子佈局，其對動畫。

我今天做了一個svg演示，我需要svg在div裏面（因爲svg是用父級的div寬度和高度創建的，爲了給周圍的路徑設置動畫），並且這個父級div需要在svg路徑中不可見動畫（然後這個div應該是animate opacity from 0 to 1，這是最重要的部分）。而由於與opacity: 0父DIV躲在我的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

Answer 7

不透明度是從父元素繼承。

但是我們可以使用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; 
       } 

輸出：

t他的文字與背景顏色相同，因爲div不在透明格

Answer 8

如果背景是彩色或圖像，但問題沒有定義，但由於@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>

Answer 9

似乎display: block元素不從display: inline父母繼承不透明度。

Codepen example

也許是因爲它是無效的標記，而瀏覽器偷偷把它們分開？因爲來源不顯示這種情況。我錯過了什麼嗎？上述

Answer 10

答案似乎複雜，我，所以我寫了這個：

#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這是你的（不透明度）的兒童。它下面的一切都是你網站的其餘部分。

Answer 11

一個小技巧，如果你的父母是透明的，你想你的孩子是一樣的，但完全確定（如覆蓋用戶代理樣式選擇下拉列表中）：

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

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

Answer 12

分配不透明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>

Answer 13

沒有一種適合所有人的方法，但我發現有一點特別有用的是爲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; 
} 

如果你有背景顏色/上的父圖像你通過施加alpha濾鏡