Re: [css-d] Transparent div with opaque text.
David Hucklesby wrote:
Emanuele Venezia wrote:
Wouldn't it be enough to use a semi-transparent image as background for the
contained
div? (it would be CSS21 compliant, too)
Absolutely. Sadly, though, the most used browser today, IE6, will not
apply alpha transparency to repeated background images. To my
knowledge, anyway - not even with PNG Fix:
http://www.twinhelix.com/css/iepngfix/
That's not true. The part you've been missing is the sizingMethod param
to AlphaImageLoader() [1]. You need to scale it.
I've used a translucent image as a BG on several occasions to get around
this exact problem. Open a 2x2 pixel image [2] in Photoshop or GIMP,
fill with white, and set your desired transparency. I like to make
several and name them like, 'bg_FFF_30.png', etc.
For IE one can use, eg. pngbehavior.htc [3] or something along the lines of:
-- snip --
// [4]
var trans_boxes = document.getElementsByClassName('div', 'whatever');
for (var i = 0; i trans_boxes.length; i++)
{
setPNGBGImage(trans_boxes[i]);
}
function setPNGBGImage(el)
{
var blankSrc = '/images/spacer.gif';
/* parse out the existing BG image
*/
var bgImageSrc = el.currentStyle.backgroundImage;
bgImageSrc = bgImageSrc.substring( bgImageSrc.indexOf('url(') + 5,
bgImageSrc.indexOf(')') )
/* sub in the GIF foor poor, old IE
*/
el.style.backgroundImage = 'url(' + blankSrc + ')';
/* run the magic filter [5]
* note the sizingMethod='scale'
*/
el.runtimeStyle.filter =
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + bgImageSrc
+ ',sizingMethod='scale');
}
-- snip --
[1] http://msdn2.microsoft.com/en-us/library/ms532969.aspx
[2] Be sure to use a 2px-wide image because Safari 2.x has a bug that'll
cause a 1-pixel image to become opaque. This was a rather ugly surprise
when Safari was updated with Tiger.
[3] http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
[4] I'll leave it as an exercise to the reader to find their favourite
getElementsByClassName(). This is a CSS list, after all.
[5] Admittedly, this filter is not the panacea it may seem. It has been
known to cause much gnashing of teeth with regard to, say, links no
longer working. Another exercise for the reader, i guess.
brian
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transparent div with opaque text.
Dermot Ward a écrit :. Is it possible to have a semi - transparent box within a div, that allows the containing div's content to partially show through the box, while the box retains full text opacity You can make it with a square gif (you need Photoshop or another similar) of 2x2 pixels, where pixels will be alternatively transparent an the others the colour you want. I mean this, where | C | is a coloured pixel and | T | a transparent one. | C | T | | T | C | Then you put this image as background image for your div and that's all. Hope it helps. Cordially Luis __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transparent div with opaque text.
David Hucklesby wrote:
On Wed, 29 Aug 2007 17:50:00 +0100, Dermot Ward wrote:
[...]I've been grappling with this
particular problem now for a couple of weeks so here goes with my first post.
Is it possible to have a semi - transparent box within a div, that allows
the containing
div's content to partially show through the box, while the box retains full
text
opacity?
One way to do this might be to use two DIVs, one superimposed over
the other. If one DIV has a background color and a fractional opacity,
while the overlaid DIV has the text and (default) transparent background,
I think that may work:
HTML
div class=background!-- --/div
div class=foregroundpSome text here ... /p/div
CSS
.background {
height: 10em;/* or ??? */
background-color: #fff;
opacity: 0.6;
}
.foreground {
margin-top: -10em;
color: #000;
}
Haven't tried this, though. :)
Well, you need to position them both relative to the same parent, and
probably also need to set a higher z-index on the foreground div to make
sure it's above the background div, yes?
--
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transparent div with opaque text.
Ingo Chao wrote: brian wrote: That's not true. The part you've been missing is the sizingMethod param to AlphaImageLoader() [1]. You need to scale it. Yes, but you cannot stretch any image that is more complex. Stretching a marguerite my look like a rose, though. Who said anything about more complex images? Did you miss the part about giving a div a semi-opaque background-color? For the record, yes--if one wants an actual *image* as the background, one would be SOL. Faking a translucent *color* by using an image is perfectly feasible (even for poor, old IE). brian __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transparent div with opaque text.
brian wrote: Ingo Chao wrote: brian wrote: That's not true. The part you've been missing is the sizingMethod param to AlphaImageLoader() [1]. You need to scale it. Yes, but you cannot stretch any image that is more complex. Stretching a marguerite my look like a rose, though. Who said anything about more complex images? Did you miss the part about giving a div a semi-opaque background-color? For the record, yes--if one wants an actual *image* as the background, one would be SOL. Faking a translucent *color* by using an image is perfectly feasible (even for poor, old IE). brian I said something about more complex images. You said something about leaving this and that to the reader. Is the reader allowed to think? So, your point is absolutely clear to me, but David was right to say IE6, will not apply alpha transparency to repeated background images. If you have anything to discuss with me about this point, or about me talking about more complex images, you are free to write me an email. Thanks. Ingo -- http://www.satzansatz.de/css.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transparent div with opaque text.
Dermot Ward ha scritto: Hi, What a great place this is for helping to demystify css. I've been grappling with this particular problem now for a couple of weeks so here goes with my first post. Is it possible to have a semi - transparent box within a div, that allows the containing div's content to partially show through the box, while the box retains full text opacity? Thanks to all for making this such a great resource. Kind regards, Dermot. Wouldn't it be enough to use a semi-transparent image as background for the contained div? (it would be CSS21 compliant, too) Emanuele __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transparent div with opaque text.
On Thu, 30 Aug 2007 13:32:04 +0200, Emanuele Venezia wrote: Wouldn't it be enough to use a semi-transparent image as background for the contained div? (it would be CSS21 compliant, too) Absolutely. Sadly, though, the most used browser today, IE6, will not apply alpha transparency to repeated background images. To my knowledge, anyway - not even with PNG Fix: http://www.twinhelix.com/css/iepngfix/ Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transparent div with opaque text.
On Wed, 29 Aug 2007 17:50:00 +0100, Dermot Ward wrote:
[...]I've been grappling with this
particular problem now for a couple of weeks so here goes with my first
post. Is it
possible to have a semi - transparent box within a div, that allows the
containing
div's content to partially show through the box, while the box retains full
text
opacity?
On Wed, 29 Aug 2007 11:43:58 -0700, I responded:
One way to do this might be to use two DIVs, one superimposed over
the other. If one DIV has a background color and a fractional opacity, while
the
overlaid DIV has the text and (default) transparent background, I think that
may work:
HTML
div class=background!-- --/div
div class=foregroundpSome text here ... /p/div
CSS
.background {
height: 10em;/* or ??? */
background-color: #fff;
opacity: 0.6;
}
.foreground {
margin-top: -10em;
color: #000;
}
Haven't tried this, though. :)
~~~
Okay. I just tried my suggestion.
Works in IE 6/7 and Opera.
Fails in Moz/ FF/ NS7 and Safari. (Text is semi-opaque too.)
Cordially,
David
--
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transparent div with opaque text.
David Hucklesby wrote:
One way to do this might be to use two DIVs, one superimposed over
the other. If one DIV has a background color and a fractional
opacity, while the
overlaid DIV has the text and (default) transparent background, I
think that may work:
HTML
div class=background!-- --/div
div class=foregroundpSome text here ... /p/div
CSS
.background {
height: 10em;/* or ??? */
background-color: #fff;
opacity: 0.6;
}
.foreground {
margin-top: -10em;
color: #000;
}
Haven't tried this, though. :)
~~~
Okay. I just tried my suggestion.
Works in IE 6/7 and Opera.
Fails in Moz/ FF/ NS7 and Safari. (Text is semi-opaque too.)
IE doesn't understand opacity. period.
Opera does something wrong with the layering.
Safari and Gecko: the 'background' div is layered above the
'foreground' div, and gives the impression of fading the 'foreground'
div. That is the correct thing to do. The div with 'opacity'
establishes a new stacking context. See
http://www.w3.org/TR/CSS21/zindex.html#painting-order
(Opacity is not mentioned there, as it is not part of CSS 2.1, but
the equivalent of this doc for CSS 3 would mention this [1]).
To get what you intended you'll have to give the 'foreground' div its
own stacking context, using position relative and z-index.
Demo:
http://dev.l-c-n.com/_temp/opacity-test.html
(Opera still gets some stacking wrong; I don't attempt to fix IE -
use on of them proprietary filters).
[1] http://archivist.incutio.com/viewlist/css-discuss/69890
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
