html - スクロール時に一方のナビゲーション バーの上に、もう一方の下に移動するテキストを含む半透明の要素

Question

1 つのナビゲーション バーの上に表示され、もう 1 つのナビゲーション バーの下に表示されるテキストを含む半透明の要素を作成するにはどうすればよいですか? http://hongkong.grand.hyatt.com/en/hotel/home.htmlのような効果を作ろうとしています。赤いハイアットのロゴと「香港」が茶色のバーの上に、バーの下に表示されます。白（画面上部）。https://www.dropbox.com/s/xarl3qe3ncxrdm1/Untitled20130520174504.jpg?v=0rc-s

Answer 1

z-index配置にさまざまな値を使用opacityし、透明度を取得する必要があります。

_{(出典: snag.gy )}

#topbar {
    height: 20px;
    width: 100%;
    position: fixed; /*so it doesn't scroll with the page*/
    left: 0;
    top: 0;
    z-index: 3; /*the bar on top gets the highest index because it's above everything else*/
}
#secondtopbar {
    height: 20px;
    width: 100%;
    position: fixed;
    top: 20px;
    left: 0;
    z-index: 1; /*the second bar on top gets the lowest index because it's below everything else except the text, with doesn't even get a z-index*/
}
#logo {
    opacity: 0.5; /*this makes it half-transparent, on a scale from 0-1*/
    height: 100px;
    width: 100px;
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 2; /*the logo gets the middle index because it's in between*/
}

Answer 2

どのタイプのソリューションをお探しですか? グランド ハイアットが何をしたかを確認すると、画像と設定position: absoluteを使用して、表示したい場所に配置しています。

画像を使用したくない場合は、いくつかの HTML 要素を重ねて使用してロゴを再作成できます。こちらhttp://jsfiddle.net/U3mCz/を参照してください。

いくつかのメモ:

• ロゴが一番上にくるように、ロゴラッパーの親に低い z-index を設定する必要があります (私の例では、500 未満の値が機能します)。
• 必要な場所にロゴを配置するには、ロゴラッパーの css を調整する必要があります。
• 赤いバーの高さを調整する場合は、行の高さを赤いバーの高さと同じに設定して、テキストの垂直方向の中央揃えを確保してください。

それがあなたを助けることを願っています。