Log in

View Full Version : Resolved DIV Opacity setting affects also the opacity of my text ! Help !


drcolt45
12-01-2013, 10:19 AM
Hi !

I have a DIV in which I applied this :


background-color: #454545;
filter: alpha(opacity=60); /* internet explorer */
-khtml-opacity: 0.6; /* khtml, old safari */
-moz-opacity: 0.6; /* mozilla, netscape */
opacity: 0.6; /* fx, safari, opera */

Everything works good except that all of my text is also affected by this opacity setting. How can I avoid that :confused:


Thank you !
Beverleyh
12-01-2013, 11:22 AM
My first thought would be to use another div for your text, with a higher z-index and absolute positioning to layer it in top.

To avoid the extra div, you could use the :before pseudo-element approach, which uses a similar logic to above without the additional markup.

Both methods are described here: http://stackoverflow.com/questions/7241341/can-i-set-an-opacity-only-to-the-background-image-of-a-div

EDIT: another method using rgb background: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
drcolt45
12-01-2013, 06:17 PM
Thank you very much Beverley !

I tried to put a div into another div ( .content (z-index=50) & #content_text (z-index=100) but there's something I don't do right I guess.. Here is my codes:


*** CODE **********************


</head>

<body>

<img src="images/fond_gold.jpg" class="superbg" />
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/background.js" type="text/javascript"></script>

<img src="images/logo2.png" align="left"/>

<ul class="menu">

<li><a href="http://www.club.com/accueil.html" title="Accueil">Accueil</a></li>
<li><a href="http://www.club.com/services.html" title="Services offerts">Services</a></li>
<li><a href="http://www.club.com/espaces.html" title="Espaces disponibles">Nos espaces</a></li>
<li><a href="http://www.club.com/securite.html" title="La sécurité de nos entrepôts">Coté Sécurité</a></li>
<li><a href="http://www.club.com/contact.html" title="Nos coordonnées">Contact</a>

</li>

</ul>

<div class="content" align="center">

<div id="content_text">

<p style="color:#F7940D;"><strong>Notre Mission</strong></p>

<p>Blab bla...</p>
<p style="color:#F7940D;"><strong>Nos valeurs</strong></p>

<p><strong>La Sécurité :</strong> Blab bla...</p>

<p><strong>La Propreté :</strong> Blab bla... </p>

<p><strong>La Satisfaction du client :</strong> Blab bla...</p>
</div>

</div>

</body>
</html>


*** CSS ***



.content {
border-radius:15px;
border-color:#A4A4A4;
border:solid;
border-width:thin;
font-family: Tahoma, Geneva, sans-serif;
font-size: .88em;
color: #FFF;
font-color:#FFF;
float: left;
width: 50%;
margin-left: 350px;
margin-top: 120px;
position: fixed;
background-color: #454545;
filter: alpha(opacity=60); /* internet explorer */
-khtml-opacity: 0.6; /* khtml, old safari */
-moz-opacity: 0.6; /* mozilla, netscape */
opacity: 0.6; /* fx, safari, opera */
line-height: 20px;
text-align: justify;
padding: 10px;
z-index: 50;
}
#content_text {
position: absolute;
z-index: 100;
width: auto;
height: auto;
}


Thanks you !!!
djr33
12-01-2013, 06:55 PM
drcolt45, note that your post was caught by our automatic spam filter (but you didn't do anything wrong)-- we'll approve posts as soon as we see them. Please be patient for it to be approved because this helps us keep the forum spam-free.
traq
12-01-2013, 07:25 PM
Everything works good except that all of my text is also affected by this opacity setting. How can I avoid that :confused:
To clarify, this is how it is supposed to work. The text is part of the div, and so is affected by the div's opacity. If you don't want the entire element (including its contents) to be semi-opaque, don't use opacity.

If you want a semi-transparent background, use an rgba color for the element's background:
.content{
background: rgba( 69,69,69,0.6 ); // same as #454545 @ 60% opacity
}

rgba is supported in all modern major browsers.

If you want it to work in IE < 9, you'll have to resort to some of @Beverleyh's suggestions (here's a demo of the absolutely positioned bg trick (http://jsfiddle.net/traq/yhS4k/1/)). Honestly, in most cases I don't find it to be worthwhile—things like this are "progressive enhancements" and it doesn't hurt anything if people using IE8 see a solid color background instead. Of course, that determination is entirely up to you.
drcolt45
12-01-2013, 07:50 PM
You guys are awsome !! That works like a charm AGAIN ! ;)

Thank you Beverley & Traq ! Your help is soooooooo appreciated !!!

Have a good day ! :D
djr33
12-01-2013, 08:20 PM
If you don't want the entire element (including its contents) to be semi-opaque, don't use opacity. [...use a semi-transparent background color]Or use two separate elements layered on top of each other. If it comes up again as something you want to do and you aren't just using a solid color background, this is one option. It's more complicated, though. The current solution is simplest/best at the moment.
traq
12-01-2013, 10:29 PM
Thank you Beverley & Traq ! Your help is soooooooo appreciated !!!
You are entirely welcome : )
drcolt45
12-01-2013, 11:40 PM
Thank you for that tip DJR ! I keep that in my notes for sure ! :)