0

コードに少し問題があります。ページに透明/ガラス状のナビゲーション バーがあります。その上にロゴを追加しようとしていますが、追加すると、ロゴも透明になり、透けて見えます。

問題は、ナビゲーション バーがロゴの前に来ていることだと思いますが、私のコードでは、ロゴが最初に来ています。

#nav {
background: #000;
height: 40px;
opacity: 0.15;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}

<div style="border-bottom-right-radius: 0.6em; 
                    border-bottom-left-radius: 0.6em;
                    box-shadow: 0px 0px 7px #000000;
                    width: 960px;">
            <div id="nav">

            </div>
        </div>

ロゴ画像は、通常の < img > タグに少しスタイリングを中央に配置したものです。

4

4 に答える 4

2

あなたの質問はロゴがナビゲーションコンテナの外にあることを示していますが、あなたの症状はそれがナビゲーションバーの子であることを示しています。そうでない場合でも、コードに欠陥があり、nav要素の子で同様の問題がすぐに発生します。

CSSの不透明度設定は、子を含む要素全体の不透明度を変更します。rgbaを使用して背景色を設定してみてください。

#nav {
    background: #000;
    background: rgba(0,0,0,.15);
    height: 40px;
    border-bottom-right-radius: 0.6em;
    border-bottom-left-radius: 0.6em;
}

rgbaバックグラウンドは古いブラウザー（IE8以前）では失敗します。＃000バックグラウンドはそれらのフォールバックです。

半透明のpngファイルを作成し、それをフォールバックの背景として設定することもできます。これはIE7以降（およびpng透明ハックを使用する場合はIE6 ）で機能します。

#nav {
    background: url('semitransparent.png');
    background: rgba(0,0,0,.15);
    height: 40px;
    border-bottom-right-radius: 0.6em;
    border-bottom-left-radius: 0.6em;
}
于 2012-04-12T00:23:04.257 に答える
1

「#nav」の内側にロゴがある場合は透明になります。ロゴに以下を指定する必要があります。

.logo{position:absolute;}

ナビゲーションの上に移動します。

于 2012-04-12T00:08:26.110 に答える
0

視覚的な順序で他の要素の上に「浮く」ように、画像の z レベルを上げることができます。

<img src="image.png" style="z-index: 1000" />

画像が親要素からスタイルを継承しているように聞こえますが。#nav 要素内に画像を配置している場合は、おそらくこれが当てはまります。その場合は、必ずopacity: 1;画像スタイルを設定してください。

補足: より明確にするために、要素タグからスタイルを抽出して CSS に組み込むこともできます。

于 2012-04-12T00:14:29.247 に答える
0

私はあなたがこれを望むべきだと思います。

CSS

#nav {
background: rgba(0,0,0,0.1);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
color:black;
    margin:10px 0 0 0;
    position:relative;
    padding-left:110px;
}
.logo{
    position:absolute;
    top:0;
    left:0;
    width:100px;
    height:25px;
    background:green;
}

HTML

<div style="border-bottom-right-radius: 0.6em;
                    border-bottom-left-radius: 0.6em;
                    box-shadow: 0px 0px 7px #000000;
                    width: 960px;margin:10px 0 0 10px;">
            <div id="nav">

                <div class="logo">Logo here </div>

your navi here
            </div>
        </div>

ライブデモhttp://jsfiddle.net/rohitazad/yNMbt/

于 2012-04-12T04:35:01.580 に答える