I have a drop-down menu for which the background needs to be roughly 60% opaque. Pretty simple. But what’s the best way to do this without making the menu items themselves 60% opaque? I want them to remain at 100%.
Since the menu items are part of an unordered list, and because the height of the list is determined by the menu items, the only way I can think of, off the top of my head, is to display the drop-down menu twice: once with the menu items themselves transparent (or not, perhaps it doesn’t matter) for the purpose of getting the background to cover the right height. Then the second instance of the menu would be absolutely positioned within the containing div and on the same level as the first instance of the drop-down menu so it wouldn’t be subject to the opacity setting. It would lay over top of it.
Seems like kind of a clumsy way to do it. Surely there’s a better way? Thanks for any help!
Couple of options.
One is a repeating background image on the entire menu (repeating if this is a solid semi-trans colour). So, a PNG with an alpha layer. PNGs with alpha layers are larger in filesize than those without, but you can get away with a small image who tiles (make the number of pixels a multiple of 8 horizontally and 4 vertically). If the solid (non-opaque) colour is set as the background colour in the image editor’s pallete (where you usually have a foreground colour and a background colour), then background-colour will be set as part of the image’s data (even if there isn’t an actual background colour on the image). This means IE6, who otherwise does not do well with alpha-trans PNGs, will at least still show the correct solid colour in your menu. If you care about IE6.
I like this idea best because it’s more cross-browser than the others, though it has the disadvantage of not allowing you a proper contrast background colour set in CSS for those not loading images.
Option 2: rgba()
This is not supported by IE6 or 7, I think 8 does support but not sure. This is a newer CSS setting that allows you to specify not only a colour but also an opacity IN the colour, so long as the colour is set in RGB form. Sucks, someone must’ve been in love with that one.
Anyway, you could set a solid colour for non-supporting browsers, then set rgba().
theelement {
background-color: #333;
background-color: rbga(51,51,51,0.6);
}
I think that was how it went. Since IE and other older browsers don’t recognise rgba(), they ignore that rule and so it shouldn’t override the first, solid version.
Remember if you have two copies of your menu, you’ve got two menus. Think of the accessibility sadpandas you’d get with that : )
Thanks so much for your help. I agree about the problems with having two menus. IE8 doesn’t seem to support the rgba, but I can work around it with a combination of your solutions. Thanks again.