維護CSS內部元素的不透明度

我在div內定義了一個div，外部div具有一定的不透明性，這導致內部元素的z-index高於容器出現dim.IS的方式不能使即使外部div是div，內部div也顯得很暗淡。維護CSS內部元素的不透明度

下面的代碼

<body> 
<style> 
    #cont{ background-color:yellow; width:900px; height:900px; margin:auto; padding:40px; position:relative; } 

#top{ position:relative; background-color:orange; width:100%; padding:10px; } 

#cont1{ background-color:black; width:800px; padding:20px; box-sizing:border-box; position:relative; z-index:3; opacity:0.4; } 

#cont1_text{color:white; z-index:4; opacity:10; padding:20px; top:10px; } 

#cont2{ background-color:blue; width:800px; padding:20px; box-sizing:border-box; position:relative; z-index:3; } 

#butt{ position:relative; clear:both; } 

</style> 
<div id="cont"> 

    <div id="cont1"> 
      <div id="cont1_text"> 

    The Last line of above code still shows the length of the array is 4, even though a element is deleted.HOW?? 
    Well, the delete method just deletes the value from the defined position but the position still remains.It’s just like drinking coke, the liquid is gone after drinking(deleting) but the bottle remains. This creates a hole or leaves an empty space in the array. 

    </div> 
    </div> 

    <div id="cont2"> 
    </div> 
</div> 
</body>

我知道實現期望的結果是通過不將內部的div外DIV中的一種方式。然後，將包含div的文本放置在容器div上方，方法是保持位置，頂部，左側等。但問題在於容器的高度不會隨着文本的長度而增加，因爲包含文本的div不在容器的div內。

輸出和編輯可以在這裏https://jsfiddle.net/sum1/av6r0aug/

來源

2015-02-23 Chelsea

我前陣子回答過類似的問題：http://stackoverflow.com/questions/27818804/setting-inner- div-opacity-to-1-but-not-affected – 2015-02-23 12:02:07

做，只要你不想不透明度適用於內心的孩子使用，而不是rgba的背景色。

爲什麼？

因爲在不透明度根據MDN

的值適用於元件作爲一個整體，包括其內容，即使該值不是由子元素繼承。因此，即使元素及其子元素具有不同的相對於彼此的不透明度，元素及其包含的子元素也具有與元素背景相對的相對不透明度。

所以，看到下面的代碼片段：

#cont { 
 
    background-color: yellow; 
 
    width: 900px; 
 
    height: 900px; 
 
    margin: auto; 
 
    padding: 40px; 
 
    position: relative; 
 
    } 
 
    #top { 
 
    position: relative; 
 
    background-color: orange; 
 
    width: 100%; 
 
    padding: 10px; 
 
    } 
 
    #cont1 { 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    width: 800px; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    z-index: 3; 
 
    } 
 
    #cont1_text { 
 
    color: white; 
 
    z-index: 4; 
 
    opacity: 10; 
 
    padding: 20px; 
 
    top: 10px; 
 
    } 
 
    #cont2 { 
 
    background-color: blue; 
 
    width: 800px; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    z-index: 3; 
 
    } 
 
    #butt { 
 
    position: relative; 
 
    clear: both; 
 
    }

<div id="cont"> 
 
    <div id="cont1"> 
 
    <div id="cont1_text">The Last line of above code still shows the length of the array is 4, even though a element is deleted.HOW?? Well, the delete method just deletes the value from the defined position but the position still remains.It’s just like drinking coke, the 
 
     liquid is gone after drinking(deleting) but the bottle remains. This creates a hole or leaves an empty space in the array.</div> 
 
    </div> 
 
    <div id="butt"> 
 
    <div id="cont2"></div> 
 
    <div id="cont2_text"></div> 
 
    </div> 
 
</div>

來源

2015-02-23 12:03:59 dippas

好吧，這真的是個好主意，但除此之外還有其他解決方法，我可以完全使用不透明度，並且這種方式非常有幫助。根據[MDN]（https://developer.mozilla.org/en-US/docs/Web/CSS/opacity）的 – Chelsea 2015-02-23 12:07:08

，這是不可能的。「即使該值沒有被子元素繼承，該值也適用於整個元素（包括其內容），因此元素及其包含的子元素與元素的背景都具有相同的不透明度，即使元素和它的孩子相對於彼此具有不同的不透明度。「 – dippas 2015-02-23 12:10:44

維護CSS內部元素的不透明度

回答

相關問題