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="fr" lang="fr">
    <head>
        <title>Layers Opacity</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta name="robots" content="index,follow" />
        <style type="text/css">
            div#container
            {
                background-color: black;
                width: 200px;
                height: 400px;
                padding-top: 50px;
                            opacity: 0.5;
            }

            ul#menu
            {
                background-color: red;
                width: 150px;
                margin: 0 auto;
                            opacity: 1;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <ul id="menu">
                <li><a href="#"></a>Menu 1</li>
                <li><a href="#"></a>Menu 2</li>
                <li><a href="#"></a>Menu 3</li>
                <li><a href="#"></a>Menu 4</li>
                <li><a href="#"></a>Menu 5</li>
            </ul>
        </div>
    </body>
</html>

「#menu」をフルカラーの赤にしたいと思います。不透明度を 1 に設定して継承を削除しようとしましたが、機能しません。私は何か間違っていましたか？または、この方法では単に不可能ですか？

おそらく、メニューの外にレイヤーを作成し、z-index を使用してバックグラウンドに配置することもできますが、xhtml を変更せずに、純粋な css で方法を探しています。

ありがとう

4

4 に答える 4

3

いいえ。メニューをコンテナの外に置くのが通常の修正です。マークアップを変更できない場合は、別の方法として、不透明度を完全に回避し、代わりにコンテナの背景として半透明の PNG を使用します (必要に応じて IE6 に適切な AlphaImageLoader を修正します)。

于 2009-10-14T10:56:24.477 に答える
3

要素の背景を変更しようとしているだけなので、サポートしているブラウザーで RGBA カラー (CSS 3) を使用できます。それをサポートしていないほとんどのブラウザーは、半透明の PNG を処理できます。

詳細な説明とサンプル コードについては、(露骨な自己宣伝) CSS 3: RGBA todayを参照してください。

于 2009-10-14T11:00:46.743 に答える
1

仕様から：

オブジェクトがコンテナ要素の場合、マスクの各ピクセルの値が .

メニューはコンテナのコンテンツであるため、コンテナの不透明度も適用されます。唯一のオプションは、メニューが技術的に div 内に含まれないように回避策を適用することです。この記事では、そのようなアプローチについても説明します。

于 2009-10-14T10:44:41.883 に答える
0

この記事で説明されているように、最新のブラウザーの背景画像と IE6 のフィルターとして透明な png を使用します。

于 2009-10-14T11:04:31.680 に答える