How to remove transparent color ( opacity )

Question

I have the following Codes:

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

Edit note I couldn't use rgba() method to set it background-color because I have to set linear gradient color.

Edit1

I couldn't get proper solution to this even after applying absolute positioning too. But next idea I would like to do this with calc() method but it doesn't exits. Any idea?

Edit2

As @rokburgar has stated an answer, I couldn't able to solve my problem even after applying absolute position. But I wanted to set opacity equal to 1.25 I know this should be 0 to 1 but he has stated 0.4 * 1.0 = 0.4 like this 0.8 * 1.25 = 1 then why does it not work?

I use JS to hidden the component. – Michelle Nov 22 '21 at 02:10 — Michelle, Nov 22 '21 at 02:10

score 0 · Answer 1 · 2013-04-21T08:09:12.840

Well since opactiy is inherited, you must separately specify opacity to different elements. One method you could use, is to define only the transparent colored text in a separate span, like this:

HTML

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

CSS

.transcolor {
    opacity: 0.4;
}

Another method you could use is separate divs like this:

HTML

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

CSS

.transcolor {
    opacity: 0.4;
}

score 0 · Answer 2 · answered Apr 21 '13 at 08:06

Opacity is inherited and cannot be simply removed. One would expect you can reset transparency on a child element.

What you did here means:

.notranscolor -> opacity: 0.4 * 1.0 = 0.4

Solution:

Absolutly position contents of child div.

Transparency trick

How to remove transparent color ( opacity )

2 Answers2