4

我有以下代码：

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 那为什么它不起作用？

4

2 回答 2

0

好吧，由于 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;
}
于 2013-04-21T08:03:11.220 回答
0

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

你在这里所做的意味着：

.notranscolor -> opacity: 0.4 * 1.0 = 0.4

解决方案：

绝对定位子div的内容。

透明技巧

于 2013-04-21T08:06:50.337 回答