0

不透明度で特異性の競合が発生したときに、ナビゲーションバーボタンを設計していました。！importantオーバーライドを使用しましたが、機能していないようです。理由について何か手がかりはありますか？

HTML：

    <body>
    <div class="container">
        <span id="text">Lorem Ipsum</div>
    </div>
</body>

CSS：

    .container {
            background-color: #000;
            opacity:0;
            height: 30px; 
            width: 122px; 
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            position:absolute;
            top:40%;
            left:43%;
        }

         #text { 
            color: #fff;
            -moz-user-select: none;
            -webkit-user-select: none;
            font-family: Courier;
            position:absolute;
            top: 5px;
            left: 5px;
            width: 122px;
            opacity:1; !important;
        }

        body {
            background-color: #808080;
        }

この後、私が得るのは空白の灰色の背景です（背景色のスタイリングのため）。スパンをdivにネストしない方がはるかに理にかなっていることはわかっていますが、アニメーションの目的でネストする必要があります。

4

2 に答える 2

2

そのようにする必要があります:

opacity:1 !important;

いいえ;_!important

持っ.containerている場合、追加しopacity:0ても、このdiv内のすべての要素は表示されませんopacity:1 !important;#text

于 2012-03-31T15:47:55.813 に答える
0

初め

thisの代わりに !importantwrite thisを宣言します。opacity:1 !important;opacity:1; !important;

2番

親に不透明度を定義するため、#text 親の不透明度を取得します。したがって、不透明度の代わりにRGBA() を使用できます。

次のように書きます。

.container {
            background-color:rgba(0,0,0,0);
        }

IE のフィルター

background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000);   /* IE6 & 7 */      
zoom: 1;
于 2012-03-31T15:54:48.837 に答える