I'm running into a kind of sticky problem with CSS. I would really like to have a slightly transparent background on my sidebar, and I can do that. However, this also causes the child elements of the div to become slightly transparent, which renders the transparency rather pointless. You see, the reason I want a slightly transparent light-blue background is so that the text will be a little more visible against the mottled background image. It hardly helps if the text becomes transparent too!
The relevant CSS looks like this:
div#links {
background-color: #CCCCFF; /* pale weak blue */
border: solid 1px #000066; /* obscure dull blue */
filter: alpha(opacity=65);
-moz-opacity: 0.65;
opacity: 0.65;
}
div#links * {
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
I got the opacity code a few months ago from this webpage, but now it looks like the author (Ove Klykken) has noticed the problem. He doesn't know a solution either, at least for browsers other than Internet Explorer. This feels really dumb to me.
Upon further exploration, it looks like opacity is meant for text, not for backgrounds. Opacity currently can create some really cool effects, but none of those are what I actually want to do.
I think that once CSS3 is eventually solidified and implemented, what I'll want to use is RBGA color values:
div#links {
background-color: rgba(204,204,255,0.65); /* pale weak blue, 65% opaque */
border: solid 1px #000066; /* obscure dull blue */
}
That way only the background color is opaque, nothing else, at least theoretically. Unfortunately, it doesn't work yet.
Sometimes I really hate web design. So much is possible, except for the one thing I want to do.
But hey, my site front page passed the Cynthia Says
automated accessibility test, so I guess I'm not doing too badly.
Aquarion says:
Not impossible, but difficult. The best way currently is probably to create a semi-transparent PNG file and use it as the background, which will work in Moz, Opera & IE Mac at once, but will show up in IEWin as a murky gray. To fix this, you'll need the IE7 hack.
Laurabelle says:
Aha, thank you. The transparent PNG does the trick.
I don't think that I'm particularly going to worry about IE. I applaud the efforts of those writing IE7, but if I hack my site to fix Microsoft's stupid browser, that creates little incentive for users to switch to something better. I don't expect J. Random Surfer to switch just because my site doesn't look quite so pretty for him, but if he notices, it might be a start.
Hmm. I think I'll write a page about how IE breaks my site and display a link to it only when users load my site in IE. Maybe someone will read it and learn something.
Laurabelle says:
The transparent PNG actually looks fine in IE; the color is just opaque rather than slightly transparent. This is fine with me; my site looks no worse than it would have otherwise.
I have started writing the IE page. I will add to it as I discover more brokenness.
Senji says:
Amusingly I saw this comment just after having looked at your site in IE as part of a discussion with a cow-orker... I like the page about how IE breaks the site :).
Laurabelle says:
Did you like how I broke the site for a few hours this morning?
I was going to write about it here but decided I'd better make it an entry instead.
Senji says:
I thought that was my browser playing up (since it does occasionally).
Ooo, I'm getting an error:
MT::App::Comments=HASH(0x80608a4) Use of uninitialized value in pattern match (m//) at extlib/laurabelle/stylish.pm line 78.
Laurabelle says:
Oh, pheh. That's the CGI code not working. See, I don't have the fu.
I've commented out the broken code now, so even though it doesn't work, at least it won't harass anyone about it.
meg says:
You might find what you are looking for in
Opacity Background with Fully Opaque Text or in
CSS Opacity Applied to Background.
It works in IE and Mozilla from here. It (opacity) will not validate.
meg@mandarin
Laurabelle says:
Thanks for the links; I had not found those on my previous searches.
It did occur to me to try funky things with positioning, but since the text in my sidebars is variable, I think it has the potential to break constantly.
Since this is my personal website, I don't mind certain things not working in Internet Explorer, as long as they don't break in a completely unusable way. :-)
David says:
A solution to what you are looking for is available. It's all fair enough using a semi transparent PNG, but to change the level of transparency isnt easy, it requires work and time, as you have to open up your favourite image editor and change it, save it, reupload it... BAHHH is all I would say to that. The solution I came up with was, using nested 2 DIV's per semi-transparent section.
DIV 1:
DIV 2:
DIV 2 matches the same position and dimensions as DIV 1 and contains ur data. I think thats fairly simple tho... Now it means you can apply your onmouseover/onmouseout effects to change the transparency etc. The only down side is u cannot have these nested, therefore they cannot be self expanding.
Patrick van Aalst says:
Yes it is a terrible thing! I've been searching my head off, and finally found this solution:
.trans_div {
*snip*
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='50percent.png');
}
combined with
.trans_div[class] {
background-image:url(50percent.png);
}
Basically this adds .png alpha to your image. For more info, see: http://www.htmlite.com/SD009a.php
I'm pretty sure that sofar, css2 doesn't allow for text or whatever to remain opaque while nested in a (semi)transparant div. This solution was the most elegant one I could find- hope it works for you.
Alpha says:
There is a hack that makes transparent PNG's work in IE
Use
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
You can see an example at my weblog with a transparent forground image scrolling in front of a stationary background.
There's a weirdness where the scrollbar is covered up if you make the window too narrow. I didn't write the code and don't know if there's a work around for that.
Alpha says:
Hmm my link disappeared transparency example
Alpha says:
I'm still getting referals from this page, so I thought I'd update the link to be current.
The one under my name is the current link.
I also fixed the problem with the scrollbar and the other difference between IE and Mozilla/Firefox, but that was so long ago that I don't remember what I did.
I suppose I should just say read the code.
sNOWsh says:
this will sort it:
one div element to hold the opaque area 65%
2nd nested div to hold content.
We use it on our search form.....
.trans_holder {
background: #2f7aa4;
filter: alpha(opacity=65);
-moz-opacity: 0.65;
opacity: 0.65;
}
.content_container {
width: 500px;
position: relative;
color: #ffffff;
Marco says:
that did it for me. maybe there is a solution for the dynamic height in ie6?!?
CSS:
.box {
overflow: hidden;
height: auto !important;
height: 100px; /* height has to be specified here for IE6 */
}
.bgtrans {
position: absolute;
left: 0;
top: 0;
display: block;
height: 10000px;
width: 10000px;
background-color: lime;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter:alpha(opacity=50);
z-index: 1;
}
.text {
float: left;
position: relative;
z-index: 2;
}
HTML:
blabla
Marco says:
hmm okay:
.box-div is surrounding the other two divs
.bgtrans is an empty div inside .box-div
.text-div is inside .box-div and contains the text
Connor Speers says:
I just found this solution! It works in my browser (Chrome), and it should work in other browsers too.
Use the rgba colorspace.
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Wil Barath says:
Here's the method I use. It is fluid.
.container {
position:relative;
width:16em;
}
.trans {
position:absolute;
height:100%; /* fills parent block */
background: #C0C0C0; /* visible on white bg */
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
}
div class=container
div class=transparent /div
content to go over transparent bg
/div