如何制作一个透明粘性的页眉？

Question

我想尝试编写一个略带透明效果的固定页眉。

有什么想法、样例代码或教程吗？如果可以，我希望只用CSS来实现。我猜需要使用不透明度（CSS3）进行调整。

- Andreas Litis

Answer 1

示例

全屏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;
}

希望这能帮到你。

- Nathan

---

嗨，我的头部div标签中还有其他元素。有没有办法让这些元素不透明。我只想让背景透明。 - Moynul

Answer 2

使用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;
}

不要使用图片，而应该使用：

background: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

- StuR

---

是的，我使用Chrome开发工具检查了他们的代码。问题：他在bg-header中使用了什么类型的图像，是透明的还是不透明的？这是做什么的？repeat-x scroll 0 0 transparent; - Andreas Litis

这是一个透明的PNG图片，不透明度已经在图像本身中平铺了。当他在代码中使用“透明”一词时，实际上并不需要这样做，因为这是默认值。 - StuR

Answer 3

你也可以使用新的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>

- Mahozad