WordPress.org

Ready to get started?Download WordPress

Forums

CSS Opacity (10 posts)

  1. khaled
    Member
    Posted 9 years ago #

    Quick one, does anyone know of any article/tutorial that solves this problem:

    Basically trying to have the background of a div have an opacity of say 75% while the text and the rest of the content within said div (that includes images as backgrounds within other divs) to not have the opacity applied to them. Any ideas?

  2. vrada
    Member
    Posted 9 years ago #

    No, but if you check the following areas, you might find it: http://www.stylegala.com/resources/
    http://www.cssbeauty.com/links/

    hope it helps a lit

  3. masquerade
    Member
    Posted 9 years ago #

    Before I tell you how to do this, I have to highly recommend you reconider using opacity because it is a CSS3 propery and is not supported in all browsers.

    Specify opacity: 0.7; on the div, and then on everything inside it specify opacity: 1;

  4. khaled
    Member
    Posted 9 years ago #

    Yeah but I've seen examples of working for safari, mozilla and ie. You just need to declare it 3 times. Also just tried having opacity 1 in the centre div, doesn't seem to work...

  5. ifelse
    Member
    Posted 9 years ago #

    Khaled,

    The following link should help you on your way.

    Update: That link actually doesn't solve your problem as I misread your question. Back to the drawing board.

  6. nmallory
    Member
    Posted 9 years ago #

    I never could get this to work "right".

  7. khaled
    Member
    Posted 9 years ago #

    Hey Phu, already checked those, I'm obviously missing something fundamental, so here's some code maybe someone can see my flaw:

    Now behind this div is the background image that I would like it to see through to essentially.

    CSS:
    #sidebar{
    margin: 220px 2px 0 2px;
    width: 265px;
    float: right;
    background: #F2F2F2 url(images/sidebar.gif) repeat-y;
    filter:alpha(opacity=70);
    -moz-opacity:0.7;
    opacity: 0.7;
    font-size: 10px;
    color: #424242;
    }

    .sidebaritems{
    margin: 10px 10px 0 10px;
    padding: 0 0 20px 0;
    background: url(images/seperator.jpg) repeat-x bottom;
    }

    .emmortel{
    margin: 10px 0 0 0;
    height: 49px;
    background-color: transparent;
    }

    .emmortel a {
    display: block;
    background: #fff url(images/emmortelb&w.jpg) no-repeat ;
    height: 49px;
    width: 244px;
    margin: 0 auto;
    }

    .emmortel a:hover {
    background: url(images/emmortelcolour.jpg) no-repeat ;
    }

    HTML:
    <div id="sidebar">
    <div class="sidebaritems">
    <div class="emmortel"> </div>
    </div>
    </div>
    </div>

    What happens is that due to the original declaration, ALL the subsequent divs have that transparency slapped onto them as well. Including all hover images etc (and normal images involved).

  8. khaled
    Member
    Posted 9 years ago #

    Actually found this reply which basically tells me to go back to the drawing board :), simply put it can't be done properly.

    Go to this forum page

    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.

  9. ifelse
    Member
    Posted 9 years ago #

    Looks like it's not really feasible in a practical way then... Thanks Khaled for the info.

  10. masquerade
    Member
    Posted 9 years ago #

    FYI, -moz-opacity and -khtml-opacity are no longer needed in Mozilla, Safari, or Konquerer. They were only there while in testing and not confirmed for the next spec.

Topic Closed

This topic has been closed to new replies.

About this Topic