CSS 如何制作透明粘性标题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7868775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a transparent-sticky header?
提问by Andreas Litis
I want to try to code a fixed-header that is a bit transparent.
我想尝试编写一个有点透明的固定标头。
Any ideas, sample code, tutorials? I want to achieve it with CSS only, if possible. Playing with the opacity (CSS3) is needed, I guess.
任何想法，示例代码，教程？如果可能的话，我只想用 CSS 来实现它。我想需要使用不透明度（CSS3）。
回答by Nathan
Example
例子
Full screen jsFiddle: http://fiddle.jshell.net/NathanJohnson/LrNBt/show/
全屏jsFiddle：http://fiddle.jshell.net/NathanJohnson/LrNBt/show/
jsFiddle: http://jsfiddle.net/NathanJohnson/LrNBt/
jsFiddle：http: //jsfiddle.net/NathanJohnson/LrNBt/
Code
代码
HTML:
HTML：
<div id="header">
<div id="header-content">
<h1>Here is some heading text :)</h1>
<p>Here is some more content of the header...</p>
</div>
</div>
CSS:
CSS：
body {
font-family: arial, sans-serif;
padding: 0;
margin: 0;
}
#header {
background-color: black;
/*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.8;
/*Opacity end*/
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 0;
margin: 0;
}
#header #header-content {
margin: 10px;
}
Or, you could just use rgba()instead of opacity:
或者，您可以使用rgba()代替opacity：
#header {
background-color: rgba(0, 0, 0, 0.8);
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 0;
margin: 0;
}
#header #header-content {
margin: 10px;
}
I hope this helps.
我希望这有帮助。
回答by StuR
Use Firebug to analyze their code:
使用 Firebug 分析他们的代码：
#header {
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 90;
background: url("../images/bg-header.png") repeat-x scroll 0 0 transparent;
height: 247px;
}
Instead of using an image use:
而不是使用图像使用：
background: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
