Opacity in CSS, some doubts
Posted
by
André
on Stack Overflow
See other posts from Stack Overflow
or by André
Published on 2010-12-30T16:00:47Z
Indexed on
2010/12/30
19:54 UTC
Read the original article
Hit count: 314
Hi,
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,
© Stack Overflow or respective owner
