4

コーディングしなければならないクレイジーなナビゲーションメニューがあります。ちょっと大変です。こちらのデザインのスクリーンショットをご覧ください。

ナビゲーションメニュー

ナビゲーションメニューのスクリーンショット

ご覧のとおり、「ホーム」メニュー項目の背景はかなり厳しいです！背景を「シースルー」にする方法がわかりません。つまり、暗い背景を切り取って、パターン化された緑色の背景を表示します。

cssを使用してこれを行う方法を知っていますか？

前もって感謝します。

4

5 に答える 5

2

次のいずれかを使用できます。

background: transparent;
background: inherit;

ただし、ホーム、ジャーナルなどのリンクが背景のボックスに埋め込まれるようにHTMLを構造化する必要があります。

角が丸い場合は、こちらをご覧ください。

または、透明度のある画像を背景として使用することもできます。

@Gary [コメント]：inherit階層を上っていくと最初に見つかった設定を取得します。したがって、中間レイヤーがある場合は、代わりにその設定を取得します。

あなたがそれから試みるかもしれない何かは使用することです：

background-image: url('greencheckers'); /* outer */

background-color: black;                /* middle */

background-image: inherit;              /* link */

background-image理論的には、最初の設定を探す必要があります。しかし、私はこれを使ったことがないので、保証はありません。

于 2008-12-21T08:08:59.100 に答える
1

それを行う 1 つの方法は、通常とは逆のアプローチです。強調表示されたタブがある場所にギャップを残して、他の要素に黒の背景を適用します。逆スライドドアの一種。

2 つの非常に長い黒のイメージを作成します。1 つは左の角が丸い右用で、もう 1 つは右の角が右の左用で、現在の要素の両側に配置します。残念ながら、プレーンな CSS ではこれができないと思いますが、すでに JS を使用しているようです。

これがどれほど実現可能かはわかりませんが、頭の中で考えただけですが、興味深いアプローチになる可能性があります。

于 2008-12-22T18:15:08.517 に答える
0

透明（または半透明）効果へのもう1つの興味深いアプローチは、2つのセクションのいずれかを与えることです。

1）同じ背景画像、または
2）似たような背景画像で、そのうちの1つが色やぼかしなどで変更されている

...そしてそれらが同じであることを確認してbackground-positionください。

これは、EricMeyerの「ComplexSpiral」デモで示されています。（これが彼が作った別のバージョンです。）

明確化：これは理由のためにマイヤーの「エッジ」セクションにあります-それはIE6と互換性がありません。（ありがとう、ボリス。）

于 2008-12-22T15:59:49.023 に答える
0

残念ながら IE6 でサポートされていない固定背景位置 (nerdposeur の回答を参照) を、background-position を使用して慎重に「手動」で配置することでエミュレートできます。大きな画像を 0,0 オフセットで配置します。選択したタブに同じ画像を使用しますが、タブの左上隅の位置だけ左および上にオフセットします。これにより、必要な 2 つの背景が正確に一致することが保証されます。

決まったメニューをお持ちのようですので、4 つのメニュー要素の背景 CSS を 1 つずつ慎重に記述する必要があります。もちろん、メニューが動的である場合、このアプローチは機能しません。これは、このページから始めてすぐに作成したデモです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>CSS Tabbed Navigation</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body {
        margin: 20px;
        padding: 0px;
        background: #CACCB4;
        font: 16px arial, sans-serif; 
        background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif'); 
        }

    pre {text-indent: 30px}

    #tabmenu {
        color: #000;
        border-bottom: 2px solid black;
        margin: 12px 0px 0px 0px;
        padding: 0px;
        z-index: 1;
        padding-left: 10px }

    #tabmenu li {
        display: inline;
        overflow: hidden;
        list-style-type: none; }

    #tabmenu a, a.active {
        color: #DEDECF;
        background: #898B5E;
        font: bold 1em "Trebuchet MS", Arial, sans-serif;
        border: 2px solid black;
        padding: 2px 5px 0px 5px;
        margin: 0px;
        text-decoration: none; }

    #tabmenu a.active {
        background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif'); 
        background-position: -125px -18px;
        border-bottom: 3px solid #ABAD85; }

    #content {font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
        text-align: justify;
        background: #ABAD85;
        padding: 20px;
        border: 2px solid black;
        border-top: none;
        z-index: 2; }

    #content a {
        text-decoration: none;
        color: #E8E9BE; }

    #content a:hover { background: #898B5E; }
    </style>
</head>

<body>

<ul id="tabmenu">
    <li><a href="tab1.html">Enormous</a></li>
    <li><a class="active" href="tab2.html">Flared</a></li>
    <li><a href="tab3.html">Nostrils</a></li>
</ul>

<div id="content">
  <p>If one examines subpatriarchialist material theory, one is faced with a choice: either accept the presemioticist paradigm of reality or conclude that the task of the artist is deconstruction, given that reality is equal to art. It could be said that the subject is contextualised into a Batailleist 'powerful communication' that includes language as a totality. Marx uses the term 'precapitalist semiotic theory' to denote the bridge between narrativity and society.</p>
  <p>Any number of desituationisms concerning Sartreist absurdity may be discovered. In a sense, the textual paradigm of consensus states that reality has significance. Baudrillard uses the term 'surrealism' to denote the absurdity, and subsequent rubicon, of substructuralist class. It could be said that la Tournier[4] holds that the works of Pynchon are modernistic. The premise of the textual paradigm of consensus states that the significance of the observer is social comment. However, in Gravity's Rainbow, Pynchon examines textual materialism; in The Crying of Lot 49 he denies subcultural discourse.</p>
    <br />
</div>

</body>
</html>
于 2008-12-22T18:08:28.297 に答える
0

30 x 1 (高さ x 幅) の画像を作成し、黒で塗りつぶし、不透明度を約 35% に設定することをお勧めします... .png として保存します (< IE7 ブラウザーとは互換性がありません)。

次のように、その画像をメニュー背景 CSS クラスに追加します。

#MainMenu {
    display: block;
    height: 30px;
    background; transparent url("menuBG.png") repeat-x;
}

これは自分のサイトで行ったことなので、これが機能することを知っています。サイトは完全ではありませんが、スクリーンショットを確認できます。

http://www.logansarchive.za.net/preview.jpg

HTH

于 2010-10-01T10:37:47.313 に答える