1

I have some doubts with opacity in CSS. I have a Header and a Footer that uses opacity, but I would like to turn off opacity the opacity in the text. Is that possible?

To a better understanding I will post the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
    #printhead {display:none;}

    html {
        height:100%; 
        max-height:100%; 
        padding:0; 
        margin:0; 
        border:0; 
        background:#fff; 
        font-size:80%; 
        font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
        /* hide overflow:hidden from IE5/Mac */ 
        /* \*/ 
        overflow: hidden; 
        /* */ 
    }

    body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}

    #content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}

    #head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:1; background-color:transparent; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000;}

    #foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:30px; background-color:transparent; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}

    .pad1 {display:block; width:18px; height:18px; float:left;} /* Com este "height", alinho a border do header */
    .pad2 {display:block; height:100px;}
    .pad3 {display:block; height:0px;} /* Com este "height" controlo onde começa o content e o scroll do browser */
    #content p {padding:5px;}
    .bold {font-size:1.2em; font-weight:bold;}
    .red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}
    h2 {margin-left:5px;}
    h3 {margin-left:5px;}


    /* Esta classe controla as caracteristicas do background do footer e do header. */
    .bkg 
    {
     background-color: blue;
     filter:alpha(opacity=35); /* IE's opacity*/
     opacity: 0.35;
     height: 10;
    }

    iframe
    {
    border-style: none;
    width: 100%; 
    height: 100%;
    }
</style>

</head>
<body>
<div id="head">
    <div class="bkg">
        <div class="pad1"></div>Header   
    </div>
</div>
<div id="content">

        <div class="pad3"></div>
            <iframe src="http://www.yahoo.com" id="iFrame"></iframe>
        <div class="pad2"></div>
    </div>
</div>
<div id="foot"><div class="bkg">Footer</div></div>
</body>
</html>

I want to maintain the opacity in the blue color in the footer and header but I would like to put the text stronger. Is that possible?

Best Regards,

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
André
  • 24,706
  • 43
  • 121
  • 178
  • related http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on – Adriano Mar 02 '14 at 14:10

3 Answers3

3

The opacity property affects the current element and all its children. The solution to your case are RGBA/HSLA colors (CSS3) on background.

Follow some links:

Davis Peixoto
  • 5,695
  • 2
  • 23
  • 35
3

opacity applies to an entire element and its descendants. For a transparent background on that specific element only, use the rgba() color notation, and set the fourth value to something between 0 and 1, or use a transparent PNG image.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Hi, thanks for the reply. The best option should be a transparent PNG? RBGA is not supported for older Internet Explorer... – André Dec 30 '10 at 16:26
  • Older IE also does not fully support PNG alpha, so it's all-or-nothing transparency, just like GIF. In fact if the limited colors are not an issue you could use GIF and indeed that would be my recommendation if you plan to use it in `background-image` and need to support IE6. – sorpigal Dec 30 '10 at 17:17
  • Yeah, I see nobody follow the links I posted... There is a nice workaround for IE5.5+ for rgba using MS filter extensions. The idea is, add a new ie-only stylesheet using conditional comments, in this sheet, which only will contains a few lines with IE hacks and tricks needed, you can set background to filter gradient. IE filter gradients supports ARGB colors, so no image is needed and code will remain valid. – Davis Peixoto Dec 30 '10 at 19:36
0

I don't think that you can add opacity once it's been taken away. Any opacity that you define will be relative to the current opacity. To make the text opaque, you'll need to define them outside of the .bkg element, and then position them on top of it.

You can see this approach in action at http://jsfiddle.net/pp3Cn/

bdukes
  • 152,002
  • 23
  • 148
  • 175