如何制作透明粘性标题？答案

【问题标题】：How to make a transparent-sticky header?如何制作透明粘性标题？
【发布时间】：2011-12-13 16:52:40
【问题描述】：

我想尝试编写一个有点透明的固定标题。

有任何想法、示例代码、教程吗？如果可能的话，我只想用 CSS 来实现它。我猜需要使用不透明度（CSS3）。

【问题讨论】：

标签： css header transparency

【解决方案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;
}

我希望这会有所帮助。

【讨论】：

嗨，我的标题 div 标签中有其他元素。无论如何我不能使这些元素透明。我只是想让背景透明。

【解决方案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;

【讨论】：

是的，我用 Chrome devtool 检查了他们的代码。问题：他使用什么样的图像作为 bg-header，透明与否？这是在做什么？ repeat-x 滚动 0 0 透明；
这是一个透明的PNG，不透明度在图像本身，水平平铺。在他的代码中使用“透明”一词的地方，他实际上并不需要这样做，因为这是默认值。

【解决方案3】：

您还可以使用新的backdrop-filter property 制作glassy（半透明）背景：

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>

【讨论】：

示例

代码

HTML：

CSS：

或者，您可以只使用rgba() 而不是opacity：

或者，您可以只使用`rgba()` 而不是`opacity`：