A question about CSS and opacity.

Discussion in 'Web Design and Development' started by torndownunit, Jan 22, 2009.

  1. torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #1
    I am basing a site on this template: http://www.oswd.org/design/preview/id/3434

    As you can see it has a content box on the right that has a transparent effect.

    I need to put a photo in that box, but when I do the photo also looks transparent. How would I go about adding the photo without it taking on the transparent effect of the box?

    Thanks a lot.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Using the opacity property will be applied to everything in that element. A newer way is to use background and rgba:
    Code:
    /* Apply black background with half opacity */
    background: rgba(0, 0, 0, .5);
    The issue with this is that it only works in Firefox, Safari, Chrome?, Opera?, but not in IE7 and below (not sure about IE8). I still use this though because you generally don't lose any functionality on the page, it just doesn't look as great in IE. Also you can first give a regular background definition before the rgba one, and IE will still recognize that to be applied.

    An alternative is to have a secondary element that you make the same dimensions and apply the opacity to it and position it underneath your other element using the z-index. It can be troublesome to get just right though in all browsers.
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    I was thinking simply put the photo in it's own div and absolutely position it. It's outside the flow, a different div and no issue with z-index.
     
  4. geekindisguise macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #4
    I agree with SrWebDeveloper
    It would be the easiest with its on DIV
    Couldn't you also just leave the DIV in that box but on the stylesheet set its transparency to none or 0 or whatever it is.
    I have never really done anything with Opacity so I am not so sure.
    But I have done lots of CSS stuff.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    As I mentioned, opacity affects everything in the element, which is what the OP is trying to avoid.
     
  6. geekindisguise macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #6
    Ohh, I didn't see that. Hmm, well then I guess having the DIV outside of that area then postitioning it would be the only way.
    I think.
     

Share This Page