opacity

Asher01 · 09-04-2011, 09:24 AM

If I have a first element with an opacity attributed to it and I place a second element inside/on top of the first one.... how can I make the second element non-opacity?

vikram1vicky · 09-04-2011, 09:37 AM

With positioning and z-index properties it is possible.... but position value can be absolute only and parent element of both elements should have position:relative defined to it

coothead · 09-04-2011, 09:41 AM

Hi there Asher01,

here is a basic example...

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>untitled document</title>

<style type="text/css">
body {
    background-color:#00f;
 }
#container {
    position:relative;
    width:440px;
    margin:auto;
 }
#faded {
    width:400px;
    height:360px;
    padding:40px;
    background-color:#f00;
    border:4px solid #000;
    opacity:0.30;
    filter:alpha(opacity=30);
    font-size:30px;
    font-weight:bold;
    text-align:center;
 }
#unfaded {
    position:absolute;
    z-index:1;
    left:84px;
    top:189px;
    width:300px; 
    padding:10px;   
    border:2px solid #000;
    font-size:30px;
    font-weight:bold;
    text-align:center;
    background-color:#fff;
 }
</style>

</head>
<body>

<div id="container">

<div id="faded">this area is effected by opacity</div>

<div id="unfaded">this area is unaffected</div>

</div>

</body>
</html>

coothead

VIPStephan · 09-04-2011, 09:41 AM

You can’t since opacity is always inherited. If the parent has 80% opcacity and the child 100% opacity then all in all it’s still 80% (100% of 80% is still 80%, and there is no more than 100% opacity). Depending on what you are trying to achieve you may be able to use an RGBA background color on the parent (“A” standing for “alpha value”, i. e. transparency), like background-color: rgba(255,255,255,.5); but this won’t work in IE. Alternatively you can make the child a sibling of the parent and position it absolutely on top of it.

Asher01 · 09-04-2011, 10:33 AM

Oh OK, I see... that makes perfect sense now that you say that.

I'll have to do something like Coot's example... find the first non-opacity and then work from that.

Thank you, all three of you.
Cheers!
Asher

coothead · 09-04-2011, 10:39 AM

No problem, you're welcome.