Background Opacity - not text and imgs, helP! (2 posts)

  1. Moogle Stiltzkin
    Posted 3 years ago #

    I read this article

    basically they have the same idea as me.

    I want to achieve this effect like on this website


    I asked the site owner and he mentioned he uses this method

    Although i'm not sure how to do that for my own site http://mognet.no-ip.info

    If you see my website, i want to change the black box where my content is, to show through so i can see the background behind it in a opaque setting so it doesn't drown out my text from being readable. Any ideas ?

  2. Moogle Stiltzkin
    Posted 3 years ago #

    Opacities (-moz-opacity in earlier moz versions, -khtml-opacity in saf1.1, opacity in current saf and moz versions, filter:alpha(opacity:#) in iew) are set on a whole element, not just the background. Opacities are nesting but not inheriting, meaning that an element with 50% opacity nested within another element with 50% opacity will end up being 25% opacity. According to the relevant CSS specs, opacities are normalised to be within the 0%-100% range, thus you can never get any part of an element to have a higher opacity than the base opacity of it's ancestors. If you want to use partial opacities for only backgrounds, there are today three choices: use CSS3 RGBA colours for the background (saf1.2 only), use alpha channel PNG for background (moz, op, saf, iem but not iew), or use a gif where you mix transparent and non-transparent pixels so that it looks like a partial transparency. There is a trick that might work for getting alpha channel PNG to work in ie5.5w and ie6.0w, that relies on using the AlphaImageLoader filter to generate the proper background opacity, though.


    Also this


    and this


    Any ideas ?

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.