web-dev-qa-db-ja.com

透明で粘着性のあるヘッダーを作成するにはどうすればよいですか？

少し透過的な固定ヘッダーをコーディングしたいと思います。

アイデア、サンプルコード、チュートリアルはありますか？可能であれば、CSSのみで実現したいと考えています。不透明度（CSS3）で遊ぶ必要があると思います。

cssheadertransparency
8
Andreas Litis

例

フルスクリーン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;
}
_

または、opacityの代わりにrgba()を使用することもできます。

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

これがお役に立てば幸いです。

13
Nathan

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;
2
StuR