Lower div opacity - keep inside divs opacity at 100%

**ducanul** · 11-21-2011, 11:04 AM

Hi, so this is my situation.

The background of the body is whole black. I created a div (a block of 100% height and 208 px wide) and I lowered it's opacity at 0.6. But inside that div I want to create another divs and I don't want them to have 0.6 opacity as well, I want them to NOT BE transparent AT ALL.

Does anyone have an idea about how can I do this? Thanks in advance.

**coothead** · 11-21-2011, 12:57 PM

Hi there ducanul,

this will work in modern browsers...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
html,body {
    height:100&#37;;
    margin:0;
    background-color:#000;
 }
#container {
    width:208px;
    height:100%;
    background-color:rgba(255,0,0,0.6);
 }
#another-div {
    padding:10px;
    font-size:36px;
    text-align:center;
    background-color:#fff;
 }
</style>

</head>
<body>

<div id="container">
 <div id="another-div">text</div>
</div>

</body>
</html>

...and this will work in legacy browsers...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
html,body {
    height:100%;
    margin:0;
    background-color:#000;
 }
#container {
    position:relative;
    width:208px;
    height:100%;
 }
#background {
    position:absolute;
    width:100%;
    height:100%;
    background-color:#f00;
    opacity:0.6;
    filter:alpha(opacity=60);
 }
#another-div {
    position:absolute;
    width:188px;
    padding:10px;
    font-size:36px;
    text-align:center;
    background-color:#fff;
 }
</style>

</head>
<body>

<div id="container">
 <div id="background"></div>
 <div id="another-div">text</div>
</div>

</body>
</html>

coothead

**svidgen** · 11-21-2011, 04:36 PM

I wasn't aware RGBA was widely supported. Define "modern browser" ... or link to a compatibility chart, please.

**rtrethewey** · 11-21-2011, 05:59 PM

Internet Explorer added support for rgba with v9.0. Everybody else has supported it for years.

The best tool for compatibility I've ever seen is When Can I Use?. Enter any CSS or HTML into the box and you get a complete compatabilty chart for both desktop and mobile browsers, with helpful implementation links. Just amazing.

**coothead** · 11-22-2011, 11:30 AM

Originally Posted by svidgen

.. Define "modern browser" ... or link to a compatibility chart...

I will do both...

Firefox 3.5+, IE9, Opera 10+, Safari 4+ and Chrome.
http://caniuse.com

coothead

**svidgen** · 11-22-2011, 11:37 AM

Originally Posted by coothead

I will do both...

Firefox 3.5+, IE9, Opera 10+, Safari 4+ and Chrome.
http://caniuse.com

coothead

Very important details for the OP, since a very large portion of folks, upwards of 50% for many sites, are using what you've declared a legacy browser.

**ducanul** · 11-23-2011, 11:44 AM

@coothead, Thank you a lot! And thanks everyone for all the trivia stuff about modern browsers you posted here!

**conkerz** · 11-23-2011, 12:10 PM

You can also employ a 1px by 1px semi-transparent png, for the background of the div. It can be made to work with older browsers with this plugin: http://jquery.andreaseberhard.de/pngFix/