如何移除透明色（不透明度）

Question

我有以下代码：

html...

<div id="solidcolor">
    <div class="transcolor">transcolor
        <div class="notranscolor">some text</div>
    </div>
</div>

css..

#solidcolor{
    background: url("http://i45.tinypic.com/o5aycp.gif") repeat; 
    width: 200px; 
    height: 200px;
}
.transcolor{
    background: blue; 
    opacity: 0.4; 
    height: 100px;
}
.notranscolor{
    background: red; /* I want this color to solid color not transparent color*/
}

演示

编辑注释 我不能使用 rgba() 方法来设置背景颜色，因为我必须设置线性渐变颜色。

编辑1

即使应用了绝对定位，我也找不到合适的解决方案。但是我的下一个想法是用 calc() 方法来做到这一点，但它不存在。有什么想法吗？

编辑2

正如 @rokburgar 所述，即使我应用了绝对位置，也无法解决我的问题。但我想将不透明度设置为 1.25，我知道这应该是从0到1，但他已经说明了 0.4 * 1.0 = 0.4 ，类似于 0.8 * 1.25 = 1，那么为什么它不起作用呢？

- user2218109

---

我使用JS来隐藏组件。 - Michelle

Answer 1

由于透明度是继承的，因此您必须单独为不同的元素指定透明度。您可以使用的一种方法是，仅在单独的 span 中定义透明颜色的文本，如下所示：

HTML

<div id="solidcolor">
    <div>
        <span class="transcolor">some transparent text</span>
        <div>some normal text</div>
    </div>
</div>

CSS

.transcolor {
    opacity: 0.4;
}

---

---

你可以使用另一种方法，就像这样分开div：

HTML

<div id="solidcolor">
    <div>
        <div class="transcolor">some transparent text</div>
        <div>some normal text</div>
    </div>
</div>

CSS

.transcolor {
    opacity: 0.4;
}

- user2284052

Answer 2

透明度是继承的，不能简单地删除。人们会期望您可以在子元素上重置透明度。

这里您所做的意思是：

.notranscolor -> opacity: 0.4 * 1.0 = 0.4

解决方案：

将子div的内容绝对定位。 透明度技巧

- Rok Burgar