Welcome to the Graphic and Web Design Forum


your forum for all things Design


  •  » Graphic Design
  •  » Web Design
  •  » Logos and Branding
  •  » Illustration
  •  » Photography
  •  » Design Tutorials
  •  » Plenty of Off Topic Chat

Register now to remove this ad box


YES! I want to register an account for free right now!


-->
Page 1 of 7 123 ... Last
  1. #1

    Text in a transparent div

    ADS NOT VISIBLE TO MEMBERS
    How would you override the transparency setting of a parent div?

    I have a paragraph tag inside a div. The text and the background of the div are the same color, lets say white. The opacity of the div is set to 60%, how do I keep the text at 100%? By default, whatever child element is in that [60%] div, will automatically be at 60% opacity. I can drop the opacity of the text even further, but if I set it to 100%, that is actually 60% because it is inside the div that is set to 60%. Any ideas? Thanks.

    Example:

    HTML Code:
    <div class="transparent">
        <p>This text need to be at 100% transparency, full color.</p>
    </div>
    Code:
    div.transparency {
    background-color:#fff;
    width:150px;
    height:350px;
    opacity:0.6;
    filter:alpha(opacity=60);
    margin:0;
    padding:10px;
    }
    div.transparency p {
    font:normal 10pt Arial;
    color:#fff;
    margin:0;
    padding:0;
    }
    John Darling - Graphic & Web Designer
    SmarterTools Inc. | (877) 357-6278 | www.smartertools.com

  2. #2
    Code:
    .transparent{
      background:rgb(255,255,255); /* For non rgba supportive browsers (yes, IE -- I'm looking at you!) */
      background:rgba(255,255,255,0.6);
    }

  3. #3
    Shit that was simple...didn't know you could use alpha in the rgb setting.

    Cheers Harry.
    John Darling - Graphic & Web Designer
    SmarterTools Inc. | (877) 357-6278 | www.smartertools.com

  4. #4
    No IE support though—considered using a png?

  5. #5

  6. #6
    Damn IE...yeah I suppose I could use an image. Would just be nice to achieve the effect without the use of an image.

    When using opacity (and filter) I cannot get the text to go beyond the parent setting. I can still get the effect to work (like your example) but it uses an empty div tag that I positioned behind the paragraph. Yeah I know...not semantically correct
    John Darling - Graphic & Web Designer
    SmarterTools Inc. | (877) 357-6278 | www.smartertools.com

  7. #7
    filter: isn't ideal CSS as it's not in any specs—it's an IE only property.

    I'd use rgba and be a little 'cutting edge' and use some nice progressive enhancement. Or a png (where you'd have to use another IE proprietary property to get IE6 working).

  8. #8
    ADS NOT VISIBLE TO MEMBERS

    thanks for the link Fear, and that may fix the issue in IE, but the parent/child issue is a problem in all browsers.
    John Darling - Graphic & Web Designer
    SmarterTools Inc. | (877) 357-6278 | www.smartertools.com

Page 1 of 7 123 ... Last

Similar Threads

  1. background: transparent;
    By joomlavideos in forum CSS Forum
    Replies: 4
    Last Post: 20-10-2009, 03:35 PM
  2. Transparent Background
    By xtremenorthwest in forum Graphic Design and Web Design Help
    Replies: 10
    Last Post: 23-10-2008, 01:31 PM
  3. Transparent PNG
    By fermanaziz in forum Graphic Design and Web Design Help
    Replies: 1
    Last Post: 15-05-2008, 02:04 PM
  4. Transparent Butterfly
    By Toon in forum Photography Forum
    Replies: 9
    Last Post: 06-11-2007, 06:31 AM

Posting Permissions

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

Log in

Log in