SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    md
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Placing text inside a div that has opacity setting

    I have a div that has the opacity set to .80... When I place something inside this div, it inherits that opacity..... How do you have it so that content within the div is not effected... so as the parent div is only the background?

    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    In IE you can usually add position:relative to the inner div and this stops the opacity following through but is non standard and won't work in other browsers.

    If you don't want the content to inherit the opacity then use a background png image which means that you will need to use the apha image loader for IE6 though.

    Something like this:

    http://www.pmob.co.uk/temp/opacity5.htm

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what you're trying to do exactly with your layout Gexus, but when I need to do something like this I just open my image in Photoshop (or similar) change the opacity, save, and then place that image as the background of my container.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


Bookmarks

Posting Permissions

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