css

Question

我想知道是否有可能使用继承创建两个具有相同颜色但具有不同不透明度的div。

据我所知，这是不可能的。至少没有我猜的错误。

如果我设置了正常的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/

我在Ubuntu的Firefox 43.0以及Android中的相同版本和Android中的Chrome 47.0.2526.83中尝试过它，每一个都以这种方式显示它。

我的问题是 - 这种行为是否正确？因为它似乎肯定不是。如果不是，是否还有其他可能使内部 div从外部 div继承颜色，但是将背景颜色设置为完全不透明度？

Answer 1

  

我的问题是 - 这种行为是否正确？

当然：你所做的只是将一个半透明的背景颜色叠加在另一个上面。想象一下，将一张彩色玻璃纸层叠在另一层上：纸张重叠的区域看起来更不透明。这是同样的效果。

外部元素的rgba(150, 180, 220, 0.5)由您指定的内部元素继承，因此您有两层背景颜色。

Answer 2

这看起来对我来说是正确的行为。从经验谈起，而不是从文档谈起。

我已经在我的OSX Firefox 43和Chrome 47.0.2526.106上尝试过它。

Answer 3

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>