CODEWITHSUNDEEP
javascriptcssinheritancestyling
rollingcodes
rollingcodes

Reputation: 15978

CSS Opacity With Parent Object

Hi I wanted to make have a popup such that the background has an opacity of 80% but the inside child objects do not inherit this property and remain 100% opaque and visible. How would I script the css or javascript to make this appear? Something like:


<div style=opacity:80>
     <div style=opacity:100>
          I want to make this text to not be partially transparent due from style inheritance
     </div>
</div>

Any ideas? Thanks for any help in advance

Cheers

Upvotes: 1

Views: 794

Answers (3)

rollingcodes
rollingcodes

Reputation: 15978

Nevermind! I found a very simple solution:


<div style="background-color: rgba(0, 0, 0, 0.8)">
    <div style="background-color: rgba(255, 255, 255, 1.0); margin: 15px">
         This text is 100% OPAQUE with a white background and 80% opaque outer background! YAY!
    </div>
</div>

P.S. Found this method from inspecting Twitter's source code

Upvotes: 2

Winfield Trail
Winfield Trail

Reputation: 5695

There are two possibilities here, in order of flexibility before simplicity:

Method 1:

Create an unstyled DIV (DIV #1). Create a second DIV (DIV #2) inside it with the background, borders, and opacity set as you like. Create a third DIV beside DIV #2, using relative positioning to place it on top of DIV #1. Put your content inside this DIV!

This method doesn't work well because stretching the content DIV doesn't inherently stretch the background DIV.

Method 2:

Create one single DIV, but instead of using Opacity use RGBA values. Simply put, with RGBA you specify RGB values, and then an alpha (transparency) level, for instance:

background: rgba(255,255,255,0.7);

You can use RGBA for the background, borders, text, you name it - and simply declaring the child element's color to be a non-transparent value is enough to prevent the transparency's inheritance.

For images, it's relatively simple to add an alpha layer to a PNG with most image editing software. Consult your manual.

A little crossbrowser shenaniganza is required to make IE8 and earlier like this, but that's another question (and answer.)

Upvotes: 1

Mo Valipour
Mo Valipour

Reputation: 13486

This works:

<div style='position:relative;width:WWW; height:HHH;'>
     <div style='opacity:80; position:absolute; top:0; left:0; width:WWW; height:HHH;'> <!-- cover -->
     <div>
          I want to make this text to not be partially transparent due from style inheritance
     </div>
</div>

Upvotes: 2

Related Questions