more CSS help regarding opacity

Discussion in 'Web Design and Development' started by x704, Oct 6, 2006.

  1. macrumors regular


    Apr 15, 2006
    I have a problem with my pictures and text color... It looks like the opacity tag is overlaying everything like the text and the pictures. Which is fine except the pictures look like they are faided.

    Any ideas to fix this?
  2. macrumors 603

    Aug 15, 2001
    The Cool Part of CA, USA
    I'd go check out this thread for suggestions:

    As I explained in that thread, here's your problem: Your "content" DIV has an opacity of .7 set. That means that both the DIV's background and *everything* contained within it also takes on an opacity of .7. Therefore, the text and the pictures will be "faded" as well.

    There is no override for this in the CSS Opacity property--no child element can have an opacity higher than its parent. This is an oversight in the spec if you ask me, but it's the way it is.

    That said, unless you're planning on doing something much fancier with the background, it seems like there are drastically easier ways of doing what you're trying to do.

    For example, since the background color of the DIV is just black, and there's not enough texture in the pattern behind it to be visible, you could get a functionally similar effect by just setting the background color to about #333333. I can't even see the pattern through the transparent background on my monitor.

    Alternately, you could set a background pattern that matches the one outside but is darker; with proper positioning of the start of the tile, they'll line up and it'll look the same as if it were overlapping. If you wanted to use a fancier image, you could do the same with absolutely positioned background images.

    Another option would be a small PNG with an alpha channel set to about 30%; this doesn't work in IE5 or 6, but it will work in IE7 and just about anything else. That's what I've done in a similar situation; it looks fine even in the browsers that don't support it--just grey instead of transparent.

    Or, you could use the CSS3 RGBA (RGB+Alpha channel) color for the background, as someone suggested in that other thread. Right now nothing but Safari supports it, but those that don't will just show a solid color and eventually support for it should expand.

    There are other ways of going about this, of course, and maybe somebody will chime in with a smarter one than my suggestions.
  3. thread starter macrumors regular


    Apr 15, 2006
    Hmm.. Interesting. The reason I did not go with making a darker version of the background is because I plan on making a program that will build a tile picture for my website every oh, I don't know maybe 4 hours or something. I just don't really know much CSS and was wondering if there was a simple fix. I guess I will have to try a few things when I get to it.

Share This Page