There is something like this:

<div id="block1" style="width: 300px; height: 300px; background-color: red;"> <div id="block2" style="width: 300px; height: 150px; background-color: #000; color: #fff; opacity: 0.2;"> <div id="block3" style="opacity: 1;"> test test test </div> </div> </div>

Here is the implementation on jsfiddle - http://jsfiddle.net/U5CLR/

How to remove the opacity (or rather return it to the value 1) for the block # block3?

Thank.

  • Inheritance. It is necessary to bring out block3, beyond the limits of block2 - istem

3 answers 3

There are two ways out:

a) Get rid of inheritance, render #block3 from #block2 ;

b) Get rid of the opacity by replacing it with rgba(...) for colors and translucent *.png for images.

  • one
    probably rgba? - VladD
  • @VladD, typo :) - Crasher

translucency:

 #block2 { background: rgba(255, 0, 0, 0.5); /*красный цвет поменяете на свой*/ }

opacity must be removed everywhere

  • Actually, this is written in my answer, why duplicate? - Crasher
  • @A_Gontarev, To format a code, select it with the mouse and click on the {} button of the editor. - Rules

As an option, replace bg with translucent png!