CSS Opacity, Layers and images
Moderator: General Moderators
- the_water_boatman
- Forum Newbie
- Posts: 2
- Joined: Sun Jan 13, 2008 9:11 am
CSS Opacity, Layers and images
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;
}
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;
}
Re: CSS Opacity, Layers and images
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:
I think you can't do it inside the DIV tag, because the opacity is applied all over the DIV content.
Code: Select all
<div> <div class="opacityDiv" style="position: absolute;">Some content</div> <img style="postion:absolute;" src="img.gif"></div> There are 10 types of people in this world, those who understand binary and those who don't
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Re: CSS Opacity, Layers and images
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.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?
Re: CSS Opacity, Layers and images
Can't you overrule the inherited transparency by setting the child elements to not-transparent?
Re: CSS Opacity, Layers and images
I think the maximum opacity you can achieve in an inherited tag is the value of the opacity of the superior tag.matthijs wrote:Can't you overrule the inherited transparency by setting the child elements to not-transparent?
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
- Ambush Commander
- DevNet Master
- Posts: 3698
- Joined: Mon Oct 25, 2004 9:29 pm
- Location: New Jersey, US
Re: CSS Opacity, Layers and images
(Wonders what happens if you set opacity to 2...)
Nothing, it seems, in Firefox, at least.
Nothing, it seems, in Firefox, at least.
- the_water_boatman
- Forum Newbie
- Posts: 2
- Joined: Sun Jan 13, 2008 9:11 am
Re: CSS Opacity, Layers and images
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
Cheers
Re: CSS Opacity, Layers and images
HELLO EVERYBODY!! I have the solution
Jey God!!
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:
Then you have to specify the style for "magicdiv" in css.
Write this into your head-section:
Yey! 
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
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>
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>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
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
Re: CSS Opacity, Layers and images
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.
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.