我想尝试编写一个有点透明的固定 header 。
任何想法、示例代码、教程?如果可能的话,我只想用 CSS 来实现它。我想需要使用不透明度 (CSS3)。
最佳答案
例子
全屏 jsFiddle:http://fiddle.jshell.net/NathanJohnson/LrNBt/show/
jsFiddle:http://jsfiddle.net/NathanJohnson/LrNBt/
代码
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:
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;
}
或者,您可以只使用 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;
}
希望对您有所帮助。
关于css - 如何制作透明粘性标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7868775/