Opaque elements in a transparent element [Archive]

View Full Version : Opaque elements in a transparent element

lobsterninja

07-04-2006, 09:14 AM

Sorry for this presumably easy question, but I just got back in to CSS and am having a little trouble with opacity. I was wondering how I could make the elements within a transparent element opaque. Basically, I'd have opaque text and buttons etc, within a transparent box.

The example is here: http://pixel-tech.net/gadm/index.php

and the CSS sheet is here: http://pixel-tech.net/gadm/css.css

Thanks a lot for the help :thumbsup:

_Aerospace_Eng_

07-04-2006, 09:29 AM

It looks opaque to me or is that not your site?

Bill Posters

07-04-2006, 09:32 AM

Afaik, re-establishing full opaqueness within a parent element using a reduce opacity property is not possible.
You have two options.
Either position a second div beneath that one and give that the semi-opaque background (keeping all the elements in the 'upper' div fully opaque.

- or -

Simply swap your use of the opacity property for a semi-opaque png24 img file, which you can set as the div's tiling background-image.
This won't effect the opacity of the elements within that div.

Note:
You'll need to use IE/Win proprietory CSS filter property to kickstart the PNG24's transparency in IE/Win, but that's a simple enough task.

Let me/us know which route you'd rather take .
(Personally, I'd recommend using the PNG24 background image.)

lobsterninja

07-04-2006, 05:49 PM

Simply swap your use of the opacity property for a semi-opaque png24 img file, which you can set as the div's tiling background-image.
This won't effect the opacity of the elements within that div.

Note:
You'll need to use IE/Win proprietory CSS filter property to kickstart the PNG24's transparency in IE/Win, but that's a simple enough task.

Let me/us know which route you'd rather take .
(Personally, I'd recommend using the PNG24 background image.)

I think that sounds good. How woul I go about making a semi-transparent png? I've only done full transparent pngs before. Also, how do I get IE to recognize the transparent png? THanks for the help.

Bill Posters

07-04-2006, 07:12 PM

Photoshop (or similar)
• Create a new document about 50px by 50px
• Create a new layer and then trash the 'background' layer.
• Fill your new layer with the colour you want (you may want to use a slightly darker version as reducing the opacity will have the effect of lightening the colour).
• Adjust the layer's opacity/transparency to a level that suits your needs.
• 'Save for web' and save in the PNG24 format with the transparency option on (e.g. nav_bg.png).

css
(remove the red, add the green)
#nav_bar {
opacity:.66;
filter: alpha(opacity=66);
font-family:Georgia, "Times New Roman", Times, serif;
font-size:48px;
font-weight:bold;
color:#00F;
border-bottom:#000 1px solid;
width:100%;
margin:0;
padding:0;
background-color:#66CCFF;
height:50px;
z-index:100;
position:fixed;
background: url(nav_bg.png);
}

Create a second css stylesheet (e.g. ie_win.css) and place this into it...
#nav_bar {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="yourbackgroundpng.png",sizingMethod="scale");
}

Add the following (green) code to the head of your markup document…

…
<head>
<link href="css.css" rel="stylesheet" type="text/css" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
…

Arbitrator

07-04-2006, 07:29 PM

If you don't have nor want to spend ~$650 on Photoshop (or rip it), you can also get an advanced image editor for free: The GIMP (http://www.gimp.org/).

gsnedders

07-04-2006, 07:32 PM

For those of you care, another way to do this would be to use a rgba() colour for the background. rgba() is part of the CSS3 colour module (which is currently a CR), but sadly is only support by WebKit.

Arbitrator

07-04-2006, 07:46 PM

And the only major browser that currently supports rgba() color values is Safari 2.0, according to this website (http://www.webdevout.net/browser_support_css.php?uas=CUSTOM&IE6=on&IE7=on&FX1_5=on&OP9=on&SF2=on).

gsnedders

07-04-2006, 08:00 PM

Arbitrator

07-04-2006, 08:09 PM

I see. :p

mitchpowell

11-21-2006, 08:28 AM

Bill Posters -
I'd like to thank you for posting this. I found it very helpful while learning about more than just transparency. I'm learning hacks for cross-scripting too.

Everything went really well with my experimentation using the ideas here, except that the 50x50 png didn't scale in Firefox. Instead it tiled.

(Oh yeah, I forgot to mention that I made it a 50x50 with a 10px feathered circle. Firefox tiles this 50x50 feathered circle, IE scales it out the way I want to see it.)

What's the workaround for Firefox?

Thanks,
Mitch

Bill Posters

11-21-2006, 09:13 AM

Everything went really well with my experimentation using the ideas here, except that the 50x50 png didn't scale in Firefox. Instead it tiled.

What's the workaround for that?
The ability to resize background images is pencilled in to arrive with CSS3.
In the meantime, we're left with tiling (or non-tiling) only.
If you wish to fill an area, but not have the image tile, you'll simply need to make the source image large enough to fill that area without tiling.

Be aware that large, complex, variable-opacity PNG24 images can be quite large in terms of file size.

mitchpowell

11-21-2006, 09:20 AM

Thank you for your timely response, Bill!

I'm anxious for CSS3. I've been learning to declare my document type as "strict", and look forward to learning more about making the transition to standards-compliant design.

I'll have to choose some other method for getting what I want for now, because I don't want 760x420 pngs.

Mitch

Bill Posters

11-21-2006, 09:25 AM

Is it possible for you to post a link to an image of the site, particularly showing how you wish to use the semi-opaque imagery?
It may be possible to optimise your use of imagery in other, more practical ways and still achieve the desired effect.