CSS Opacity, Layers and images

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
the_water_boatman
Forum Newbie
Posts: 2
Joined: Sun Jan 13, 2008 9:11 am

CSS Opacity, Layers and images

Post by the_water_boatman »

I need some help with opacity and layers within CSS. Does anyone know how to avoid and image inheriting the opacity of a tag its set within?

I have set background image for my page within the body tag. I have then set a div tag with a background colour of white with and opacity of 60 so that the background image shows through – see code below.

I have added some text and want to add an image into the div tag below; but, whenever I add an image into the HTML code, the image inherits the opacity of the div.

Any help would be most welcome.

Thanks
The Water Boatman

{
position: relative;
text-align: left;
width: 760px;
height: 180px;
background-color: #ffffff;
border: 1px solid #C0C0C0;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
/* for Mozilla */
-moz-opacity:0.6;
}
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: CSS Opacity, Layers and images

Post by VladSun »

I would solve this problem by placing the image tag outside the div tag and positioning the image by using absolute over the opacity div:

Code: Select all

 <div>   <div class="opacityDiv" style="position: absolute;">Some content</div>   <img style="postion:absolute;" src="img.gif"></div> 
I think you can't do it inside the DIV tag, because the opacity is applied all over the DIV content.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: CSS Opacity, Layers and images

Post by superdezign »

the_water_boatman wrote:I need some help with opacity and layers within CSS. Does anyone know how to avoid and image inheriting the opacity of a tag its set within?
You can't. You could always try using a transparent PNG file as the background instead, which wouldn't work on IE6, but every other major browser would support it. And, by the way, I believe that you no longer need to use the moz-opacity CSS property. Mozilla uses the CSS standard, now.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS Opacity, Layers and images

Post by matthijs »

Can't you overrule the inherited transparency by setting the child elements to not-transparent?
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Re: CSS Opacity, Layers and images

Post by VladSun »

matthijs wrote:Can't you overrule the inherited transparency by setting the child elements to not-transparent?
I think the maximum opacity you can achieve in an inherited tag is the value of the opacity of the superior tag.

I.e. :
1) having 60% opacity of the outer div and 100% opacity in the inner div means that you have 60% opacity of the inner div.
2) having 60% opacity of the outer div and 50% opacity in the inner div means that you have 30% opacity of the inner div.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Re: CSS Opacity, Layers and images

Post by Ambush Commander »

(Wonders what happens if you set opacity to 2...)

Nothing, it seems, in Firefox, at least.
User avatar
the_water_boatman
Forum Newbie
Posts: 2
Joined: Sun Jan 13, 2008 9:11 am

Re: CSS Opacity, Layers and images

Post by the_water_boatman »

It is as I suspected then. Thanks for all your help. I think I will set the transparant area in the backgound image - unfrotunately fixed width and position all the images with CSS.

Cheers :drunk:
pekaaw
Forum Newbie
Posts: 1
Joined: Sun Nov 15, 2009 6:59 pm

Re: CSS Opacity, Layers and images

Post by pekaaw »

HELLO EVERYBODY!! I have the solution :D Jey God!! :D
OK, after some hours of wondering and searching through the web late at night,
I finally discovered a way to do this!

This is what you do:

Code: Select all

<div id='aDiv'> <!-- this div you can place whereever you want :) -->
 All the html-codes you want!
 <img src='someURL/picture.jpg' />
 <hr />
 
 and now the trick:
 <div id="magicdiv"></div>  <!-- this becomes like a transparent layer behind your content -->
</div>
 
Then you have to specify the style for "magicdiv" in css.

Write this into your head-section:

Code: Select all

<style type="text/css">
 #magicdiv{
 background-color: #000; /*your desired (partly transparent) background-color */
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: -1; /* for placing the transparent layer behind your text and images */
 -moz-opacity = .70;
 filter: alpha(opacity=70); /* the degree of opacity is of course your choice ;) */
 opacity: .70;
 }
</style>
Yey! :D
I want to honour the people at hedgerwow.com that did it before me. It took some time before I understood what was done, but now it's clear to me. Here is what they did: http://www.hedgerwow.com/360/dhtml/css- ... herit.html
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Re: CSS Opacity, Layers and images

Post by superdezign »

So, basically you create a dummy element inside of the main element, stretch it across the entirety of the main element, and place it behind the separate text element?

That's clever. However, I'm not sure that necro-ing this almost-2-years-old thread was the best way to inform us. Besides, we like to avoid dummy elements.
Post Reply