Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Opacity Technique Question

    I'm not sure how to do something in Firefox, or if it even can be done.

    What I want is to have a box with a background color, with the opcaity set to 40 or .4. Then, I want to have another div sit on top of that div and display text at 100% or 1 opacity.
    The idea is to darken the background image enough so that the text is readable.

    I've tried divs, divs within divs, putting the text on the first line or the second line. Nothing seems to work.

    I can get it to work in IE but not FF. Can this be done?
    Last edited by silverchild; 11-18-2008 at 07:36 PM. Reason: Added browser details

  • #2
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Resolved

    I guess you have to set the position of the element with full opcaity using position-relative. Interesting.

    I used :
    http://www.mandarindesign.com/troops...backgroundhard

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    In theory you could use rgba() color co-ordinates, but it's only supported in Firefox 3; not sure about Opera and WebKit. If you're not supporting IE6, PNG alpha would be a good idea.

  • #4
    eak
    eak is offline
    Regular Coder eak's Avatar
    Join Date
    Jun 2002
    Location
    Nashville, TN
    Posts
    354
    Thanks
    0
    Thanked 26 Times in 26 Posts
    Firefox 3 and Safari 3 supports rgba (see css3.info)
    For everyone else, I would use a png (with hack for ie6).
    eak | "Doing a good deed is like wetting your pants; every one can see the results, but only you can feel the warmth."


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •