/    Sign up×
Community /Pin to ProfileBookmark

Lower div opacity – keep inside divs opacity at 100%

Copy linkTweet thisAlerts:
Nov 21.2011

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.

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadNov 21.2011 — Hi there ducanul,

this will work in modern browsers...
[color=navy]
<!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 {
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>
[/color]
...and this will work in legacy browsers...
[color=navy]
<!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>
[/color]
[i]coothead[/i]
Copy linkTweet thisAlerts:
@svidgenNov 21.2011 — I wasn't aware RGBA was widely supported. Define "modern browser" ... or link to a compatibility chart, please.
Copy linkTweet thisAlerts:
@rtretheweyNov 21.2011 — 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 [url=http://caniuse.com/#]When Can I Use?[/url]. 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.
Copy linkTweet thisAlerts:
@cootheadNov 22.2011 — .. Define "modern browser" ... or link to a compatibility chart...[/QUOTE]
I will do both...
[list=1]
  • [*][color=navy]Firefox 3.5+, IE9, Opera 10+, Safari 4+ and Chrome.[/color]

  • [*][url=http://caniuse.com/][color=navy]http://caniuse.com[/color][/url]

    • [/list]
    [i]coothead[/i]
    Copy linkTweet thisAlerts:
    @svidgenNov 22.2011 — I will do both...
    [list=1]
  • [*][color=navy]Firefox 3.5+, IE9, Opera 10+, Safari 4+ and Chrome.[/color]

  • [*][url=http://caniuse.com/][color=navy]http://caniuse.com[/color][/url]

    • [/list]
    [i]coothead[/i][/QUOTE]

    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 [I]legacy browser[/I].
    Copy linkTweet thisAlerts:
    @ducanulauthorNov 23.2011 — @coothead, Thank you a lot! And thanks everyone for all the trivia stuff about modern browsers you posted here! ?
    Copy linkTweet thisAlerts:
    @conkerzNov 23.2011 — 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/
    Copy linkTweet thisAlerts:
    @svidgenNov 23.2011 — @coothead, Thank you a lot! And thanks everyone for all the trivia stuff about modern browsers you posted here! ?[/QUOTE]

    It's not necessarily "trivia" when it affects 20 to 60% of your visitors ...
    ×

    Success!

    Help @ducanul spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.19,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...