Rick wrote.
> Is there a way to control the transparency of the background
> color of a DIV? background:transparency 50% ???
>
I have been investigating this and have the following to offer. There
is no transparency attribute as you imagine. Opacity would seem to be
usable, but it applies to text and all child elements, not just the
background.
You can use a png image or use the Eric Meyer's complexspiral
technique for transparency. The complexspiral technique doesn't
require a work around for IE. PNG techniques do not require careful
alignment between the foreground and background.
One png technique.
1. Create a small rectangular image in an editor that supports png
transparency, such as Photoshop Elements. Set the opacity of the image
to the desired level and save as a png file (50alpha.png).
2. set the png as the background of your div as follows:
.transbg {
background: transparent url(images/50alpha.png) repeat;
}
3. Compensate for IE's lack of support for png alpha transparency
by referring to an ie
only style sheet through conditional comments.
In the ie stylesheet file, redefine the class selector as follows:
.transbg {
background: none; /* can't show the png as a background image, use
proprietary property below */
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/50alpha.png',
sizingMethod='scale');
height: 1%; /*add 'haslayout' here if required */
}
You must be very careful to test the page with images turned off to
make sure your default color and background-color attributes work
together without the image. You could easily end up with no contrast between
your text and background with images turned off.
Eric Meyer's complexspiral technique is demonstrated at
For additional complexity, combine custom corners with an alpha
transparent background. See Roger Johansson at www.456bereastreet.com
When making custom corners with alpha transparency, backgrounds must
not overlap.
---
Paul Debban
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
