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*/
}

DEMO

编辑备注我无法使用rgba（）方法将其设置为背景色，因为我必须设置线性渐变色。

Edit1

即使在应用绝对定位之后，我也无法得到正确的解决方案。但是下一个想法我想用calc（）方法做这个，但它不会退出。有什么想法吗？

EDIT2

正如@rokburgar所说的那样，即使申请绝对职位，我也无法解决问题。但是我想设置不透明度等于1.25我知道这应该是0比1，但是他说0.4 * 1.0 = 0.4就像这样0.8 * 1.25 = 1然后为什么它不起作用？

Answer 1

因为opactiy是继承的，所以必须单独为不同的元素指定不透明度。您可以使用的一种方法是仅在单独的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;
}

Answer 2

不透明度是继承的，不能简单地删除。可以预期您可以重置子元素的透明度。

你在这里所做的意思是：

.notranscolor -> opacity: 0.4 * 1.0 = 0.4

解决方案：

绝对定位子div的内容。

Transparency trick

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

2 个答案: