我想尝试编写一个略带透明效果的固定页眉。
有什么想法、样例代码或教程吗?如果可以,我希望只用CSS来实现。我猜需要使用不透明度(CSS3)进行调整。
我想尝试编写一个略带透明效果的固定页眉。
有什么想法、样例代码或教程吗?如果可以,我希望只用CSS来实现。我猜需要使用不透明度(CSS3)进行调整。
全屏jsFiddle:http://fiddle.jshell.net/NathanJohnson/LrNBt/show/
jsFiddle:http://jsfiddle.net/NathanJohnson/LrNBt/
<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>
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;
}
希望这能帮到你。
#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;
}
不要使用图片,而应该使用:
background: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
你也可以使用新的backdrop-filter
属性来制作一个玻璃般的(半透明)背景:
header {
top: 0;
position: sticky;
background: transparent;
backdrop-filter: blur(5px);
}
header {
top: 0;
position: sticky;
background: transparent;
backdrop-filter: blur(5px);
padding: 24px;
font-size: 24px;
font-weight: bold;
}
p {
width: 200px;
}
<header>This is a sticky header</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris magna elit, consectetur in ultricies nec, imperdiet sit amet turpis. Sed ligula eros, pellentesque ac ligula eu, mollis iaculis est. Donec tempus massa in libero consectetur, laoreet feugiat tortor rhoncus. Aliquam ac risus et risus finibus sodales. Suspendisse et ipsum mollis, convallis elit ac, interdum nibh. Etiam finibus odio urna, eu pretium arcu varius ut. Aliquam erat volutpat.
Duis volutpat mollis turpis, at posuere ipsum semper in. In in ligula tortor. Integer eget lorem nec ex ultricies molestie. Proin convallis sagittis orci nec tempus. Pellentesque luctus condimentum libero in fermentum. Mauris ornare sem nec tellus bibendum, eu interdum nisl mollis. Morbi et lectus sodales, blandit urna et, posuere metus. Praesent sodales eu tortor eu vestibulum. Mauris eu quam sit amet neque faucibus facilisis. Sed tincidunt enim egestas elit finibus, id tempor erat luctus. Ut sed faucibus ante. Suspendisse non lacus augue. Duis porta lorem sed enim lobortis, a malesuada leo scelerisque. Nam neque massa, tempus sit amet velit nec, tincidunt bibendum dui. Praesent neque tortor, blandit in nunc vehicula, suscipit fringilla turpis.
</p>