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 :

Code:

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

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/7...image-of-a-div

EDIT: another method using rgb background: http://robertnyman.com/2010/01/11/cs...a-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 **********************

HTML 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 ***

Code:

.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

Originally Posted by drcolt45

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

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:

Code:

.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). 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 !

**djr33** · 12-01-2013, 08:20 PM

Originally Posted by traq

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

Originally Posted by drcolt45

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 !

Thread: DIV Opacity setting affects also the opacity of my text ! Help !

Thread Tools

Search Thread

DIV Opacity setting affects also the opacity of my text ! Help !

The Following User Says Thank You to djr33 For This Useful Post:

Similar Threads

Using Opacity for Background without Text Inheriting it.

Css Opacity

Image Opacity (fade in/out) with text OnMouseOver/Out

Opacity Help

CSS Opacity Fun

Bookmarks

Bookmarks

Posting Permissions