在css中的背景顏色繼承

我想知道是否有可能使用繼承創建兩個具有相同顏色但不透明度的div。在css中的背景顏色繼承

據我發現，這是不可能的。至少沒有我猜的錯誤。

如果我設置正常的RGB顏色，並給它不透明度和div內繼承背景顏色，只是設置沒有不透明度它不會做伎倆。

#outside { background-color: #96B4DC; opacity: 0.5; } 
#outside > * { opacity: 1; } 
.inside { background-color: inherit; }

它應該是這樣的：https://jsfiddle.net/s6pandof/5/

所以，我想其他的選擇，最簡單的是對我的RGBA。所以我只是設定了顏色，繼承了它，並且正在考慮做更多的事情，但是讓我感到驚訝。內部div沒有不透明。所以它做到了。

#outside { background-color: rgba(150, 180, 220, 0.5); } 
.inside { background-color: inherit; }

你莫不是看到：https://jsfiddle.net/s6pandof/6/

我想它在Firefox 43.0在Ubuntu和Android中相同的版本和Chrome 47.0.2526.83在Android和每一個顯示這種方式。

我的問題是 - 這種行爲是否正確？因爲它似乎不是。如果不是，有沒有其他可能性 div從繼承顏色 div，但設置背景顏色爲完全不透明？

來源

2016-01-03 Polostor

background-color: alpha通道繼承行爲是正確的。

一個半透明<div>與另一個半透明<div>重疊。

你所看到的作爲背景div#inside是結合半透明。

見下面的演示：

div { 
 
position: relative; 
 
} 
 

 
p { 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
margin: 0; 
 
} 
 

 
div[id^='outside'] { 
 
width: 100%; 
 
height: 100px; 
 
} 
 

 
div[id^='inside'] { 
 
width: 50%; 
 
height: 100%; 
 
margin: 0 auto; 
 
} 
 

 
#outside1 { 
 
background-color: rgba(150, 180, 220, 0.5); 
 
} 
 

 
#outside2 { 
 
background-color: rgba(150, 180, 220, 0.4); 
 
} 
 

 
#outside3 { 
 
background-color: rgba(150, 180, 220, 0.3); 
 
} 
 

 
#outside4 { 
 
background-color: rgba(150, 180, 220, 0.2); 
 
} 
 

 
#outside5 { 
 
background-color: rgba(150, 180, 220, 0.1); 
 
} 
 

 
#inside1, #inside2, #inside3, #inside4, #inside5 { 
 
background-color: inherit; 
 
}

<div id="outside1"> 
 
<p>Outside 1 (0.5)</p> 
 
<div id="inside1"><p>Inside 1 (0.5 + 0.5)</p></div> 
 
</div> 
 

 
<div id="outside2"> 
 
<p>Outside 2 (0.4)</p> 
 
<div id="inside2"><p>Inside 2 (0.4 + 0.4)</p></div> 
 
</div> 
 

 
<div id="outside3"> 
 
<p>Outside 3 (0.3)</p> 
 
<div id="inside3"><p>Inside 3 (0.3 + 0.3)</p></div> 
 
</div> 
 

 
<div id="outside4"> 
 
<p>Outside 4 (0.2)</p> 
 
<div id="inside4"><p>Inside 4 (0.2 + 0.2)</p></div> 
 
</div> 
 

 
<div id="outside5"> 
 
<p>Outside 5 (0.1)</p> 
 
<div id="inside5"><p>Inside 5 (0.1 + 0.1)</p></div> 
 
</div>

來源

2016-01-03 14:33:47 Rounin

雖然我理解這個問題，但我不得不將這個答案設置爲正確的答案，因爲這個片段。解釋任何需要知道的東西。謝謝 – Polostor

btw有沒有特別的理由在數字中使用id？我猜這個班會爲所有的內部做同樣的工作，而且會更容易看。 – Polostor

Yes，'class'是絕對沒問題的。我只是因爲'id'在問題中使用了'id'。 – Rounin

這看起來對我來說是正確的行爲。從經驗談起，而不是從文檔。

我已經在我的OSX Firefox 43和Chrome 47.0.2526.106上試過了。

來源

2016-01-03 14:03:29 Moe

我想正確的行爲應該繼承完全相同的顏色（具有相同的阿爾法）。不只是顯示純粹的rgb（沒有alpha）。 – Polostor

哦..我喜歡讓自己*** ..我沒有意識到，內部的div有外部的背景，所以它的顏色更加飽滿。 :( – Polostor

@Polostor是的，它很難用眼睛調試，添加0.5不透明度和另一個0.5不透明度使它看起來不透明 – Moe

我的問題是 - 這種行爲是否正確？

當然：你正在做的是將一個半透明背景顏色疊加在另一個背景上。設想將一張彩色玻璃紙疊加在另一張玻璃紙上：紙張重疊的區域顯得更加不透明。這是一樣的效果。

來自外部元素的rgba(150, 180, 220, 0.5)由您指定的內部元素繼承，因此您有兩個該背景色的圖層。

來源

2016-01-03 14:24:31 BoltClock

在css中的背景顏色繼承

回答

相關問題