如何制作透明粘性标题？

Question

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

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

Answer 1

示例

全屏 jsFiddle ： http://fiddle.jshell.net/NathanJohnson/LrNBt/show/< /a>

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< /code>：

#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;
}

我希望这有帮助。

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;

Answer 3

您还可以制作 玻璃（半透明）背景noreferrer">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>