CSS中的不透明度，一些疑问
我对 CSS 的不透明度有一些疑问。我有一个使用不透明度的页眉和页脚，但我想关闭文本中的不透明度。这可能吗？
为了更好地理解，我将发布代码。
<!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 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,
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
oppacity 属性影响当前元素及其所有子元素。您的情况的解决方案是背景上的 RGBA/HSLA 颜色（CSS3）。
请点击一些链接：
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:
opacity适用于整个元素及其后代。对于仅特定元素上的透明背景，请使用rgba()颜色表示法，并将第四个值设置为 0 到 1 之间的值，或使用透明 PNG 图像。opacityapplies to an entire element and its descendants. For a transparent background on that specific element only, use thergba()color notation, and set the fourth value to something between 0 and 1, or use a transparent PNG image.我不认为一旦不透明度被取消就可以添加它。您定义的任何不透明度都将相对于当前的不透明度。要使文本不透明，您需要在
.bkg元素外部定义它们，然后将它们放置在其顶部。您可以在 http://jsfiddle.net/pp3Cn/ 中查看此方法的实际效果
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
.bkgelement, and then position them on top of it.You can see this approach in action at http://jsfiddle.net/pp3Cn/