SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    173
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    how can i make a bg transparent but text not

    i want the p background to be transparent but not affect the span text. so far with the combinations i've tried, changing the opacity on the p element changes the span text.

    why doesn't span styles keep the span text 100% trasparency free, in other words, with 0 opacity applied, fully visible?

    Code HTML4Strict:
    <p><span>text</span></p>

    Code CSS:
    p{
        background: #000;
        color: #fff;
        width: 100%;
        /* transparent - need hasLayout for ie ( zoom: 1; ) I have width set above */
        filter: alpha(opacity=70);
        opacity: 0.7;
    }
    p span{
        filter: alpha(opacity=100);
        opacity: 1.0;
    }

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    The short answer is that you are seeing the normal behavior for opacity. It affects the container and everything in it, not just the background.

    The code that you are presenting suggests that you wish to support IE7. If that is the case, I suggest that you use a semi-transparent image as a background overlay. I have used one successfully many times.

    Modern browsers can use rgba() colors which makes applying a background color with transparency a piece of cake.

    Hope this helps.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sessions View Post
    i want the p background to be transparent but not affect the span text. so far with the combinations i've tried, changing the opacity on the p element changes the span text.

    why doesn't span styles keep the span text 100% trasparency free, in other words, with 0 opacity applied, fully visible?

    Code HTML4Strict:
    text

    Code CSS:
    p{
        background: #000;
        color: #fff;
        width: 100%;
        /* transparent - need hasLayout for ie ( zoom: 1; ) I have width set above */
        filter: alpha(opacity=70);
        opacity: 0.7;
    }
    p span{
        filter: alpha(opacity=100);
        opacity: 1.0;
    }
    You do it like this to avoid the issue your seeing...

    #box {
    background:rgb(166,166,166); /* IE6/7/8 */
    filter:alpha(opacity=70); /* IE6/7/8 */
    background:rgba(166,166,166,0.7); /* Modern Browsers */
    }
    #box p {
    position:relative; /* IE6/7/8 */
    }

    Now this thread will be number 1 on google and my site with its same text number 30. Awesome lol. Goge will prob think I'm the duplicate content. Nope then down to number 40.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    173
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    so i need to wrap my p element and give the wrapper the opacity, not the p?

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    {position:relative} on the <span> element is the key. It lifts the text above the container that has opacity applied.

    Very cool solution!

    Using your HTML and @EricWatson 's css:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1047767-how-can-i-make-a-bg-transparent-but-text-not
    Thread: how can i make a bg transparent but text not
    2013.04.28 11:41
    sessions
    -->
    <head>
        <title>opacity</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    p {
        background:rgb(0,0,255);     /* IE6/7/8 */
        filter:alpha(opacity=30);     /* IE6/7/8 */
        background:rgba(0,0,255,0.3);  /* Modern Browsers */
    }
    span {
        position:relative;   /* IE6/7/8 */
        color:#f00;
        font-size:2em;
        margin:0;
    }
    
        </style>
    </head>
    <body>
    
    <p><span>This is a paragraph of text that may extend forever or wrap at the ends of the Earth.</span></p>
    
    </body>
    </html>

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    IE6/7/8 get fed the rgb background (and doesn't read the next rgba background), the opacity filter, and position relative on the inner elements. Modern browsers simply get fed the rgb(a) background. Walla - CSS Opacity that works in all browsers without the hacks. The end!

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I put my html up there 2 posts ago I don't know where it went. Here is the acompaining html. Ahh I forgot to wrap it.

    Code:
    <div id="box"> 
    <p>Text</p>
    </div>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    {position:relative} on the <span> element is the key. It lifts the text above the container that has opacity applied.
    It's basically a long standing bug rather than a feature but a useful bug at times and often used as a work-a-around. It has no logic as the position:relative should have no effect but by accident it seems to stop the opacity being applied to that element. Although it works in IE8 you have to be careful that parents of the element do not have position applied or strange things may happen (not always).


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
  •