DIV Opacity

@adam_fakeOct 23.2007

Hello all,

I’m using the following code to create a transparent DIV:

background-color: #000000; filter:alpha(opacity=80); -moz-opacity:.80; opacity:.80;

Trouble is i have some images inside the DIV and it is causing them to go transparent – how can i have it so the background of the DIV is opaque but the images inside remain at full opacity.

Thanks

to post a comment

CSS

@TJ111Oct 23.2007 — #Probably have to put the images in their own div and set the opacity to 100. Although there are several cross-browser quirks regarding opacity and inheritence.

@adam_fakeauthorOct 23.2007 — #Yeah, i tried to put a DIV within the Opaque DIV and place the images in that but it doesn't seemed to have made a difference, even if i use the Opacity attributes and set the levels.

@TJ111Oct 23.2007 — #You could also try adding position:relative to the CSS. I've done a similar thing before, but couldn't get it to work in all browsers.

@CentauriOct 23.2007 — #Another way of doing this is to tile a semi-transparent .png graphic as the container background.

@WebJoelOct 24.2007 — #Here is a little example I wrote up that uses a *jpg and opacity, and full-opacity text overtop of it. Using a 'wrapper div' allows some leniency on this example.. IMGs can be used instead of the text I used.

CSS:<style type="text/css">

#opacWrapper {position:relative; margin:25px;}

#opac {width:300px; height:300px; [B]filter:alpha(opacity=40); -moz-opacity:.40; opacity:.40; background:url(ferret.jpg)[/B]}

#opacWrapper p {width:280px; margin:10px; font-weight:bold; position:absolute; top:10px; color:black; line-height:1.35em;}

#opacWrapper p span {font-size:1.3em; margin:0 2px 0 2px; text-decoration:underline; font-style:italic; }

</style>[/QUOTE]HTML:<div id="opacWrapper">

<div id="opac"></div>

<p>An opaque <span>*JPG background</span> image and 100% full-opacity text over top of the image.

<br />I'm sure that the ferret doesn't mind this.</p>

</div>[/QUOTE] and the attached image.

[upl-file uuid=a0e3baed-cb68-43ea-b9d4-1e0d53a5b9b2 size=15kB]ferret.jpg[/upl-file]

DIV Opacity

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

DIV Opacity

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴