51

不透明度0.8のコンテナがあります。背景には、コンテンツ div を通して輝く画像があります。今、このコンテナにクライアントの写真があります。問題は、この画像の不透明度が本体ではなくコンテナに相対的であるため、親要素の不透明度を使用することです。

私はこのコードを持っています:

<div id="contentContainer" style="background: #FFFFFF; opacity: 0.8">
    Content ...
    <img src="..." style="opacity: 1.0" alt="Photo" />
</div>

以下で説明するように、これは機能しません。

誰にもアイデアはありますか？

4

6 に答える 6

68

次のように変更することで、この問題を解決しました。

<div id="contentContainer" style="background: rgba(255,255,255,0.8);">
    Content ...
    <img src="..." alt="Photo" />
</div>

不透明度の代わりに rgba alpha のみを使用しました。今では動作します。

于 2013-10-18T19:14:03.010 に答える
9

他の回答が述べているように、これは不透明度を使用して、つまりこの方法では不可能です。

回避策/ハックはposition: relative; z-index:2;、親要素に追加することcontentContainerです。次に、不透明度やその他のものを持つ別の要素を追加します。これは、背景として画像がある場合に特に便利です

したがって、マークアップは次のようになります。

HTML

<div id="contentContainer">
    Content ...
    <img src="..." alt="Photo" />
    <span id="contentBackground"></span>
</div>

CSS

#contentContainer { position: relative; z-index 2; }
#contentBackground {
    position: absolute;
    display: block;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: /* stuff */;
}

z-indexプロパティに注意してください。これらは、背景要素が親の下にあり、クリック イベントを妨げるコンテンツと重ならないようにするために重要です。

このメソッドは、 を追加する必要がある疑似要素 (:beforeまたは) で使用することもできます。:aftercontent: '';

于 2013-10-18T19:19:08.900 に答える
9

これは、特定の子要素が不透明になるのを防ぎ、 opacityを使用したい他の人を助けるかもしれません。

:not()セレクターを使用できます。このサンプルを取ります。

<style type="text/css">
    .redbg{
        background-color:red;
    }
    .sample1 :not(.NonOpaque){
        opacity:0.5;
    }
    .sample2:not(.NonOpaque){
        opacity:0.5;
    }
</style>

<div style="background-color:rgb(63,72,204); padding:15px; margin:15px;">
    <div class="redbg sample1">
        <div>
            SAMPLE 1.
        </div>
        <div class="NonOpaque">
            I am not Opaque.
            Blah! Blah! Blah!
        </div>
        <div>
            I am Opaque.
            Blah! Blah! Blah!
        </div>
        <div>
            I am Opaque.
            Blah! Blah! Blah!
        </div>
    </div>
</div>

<div style="background-color:rgb(63,72,204); padding:15px; margin:15px;">
    <div>SAMPLE 2.</div>
    <div class="redbg sample2 NonOpaque">
        <div style="padding:5px; margin:3px;">
            I am not Opaque.
            Blah! Blah! Blah!
        </div>
    </div>
    <div class="redbg sample2">
        <div style="padding:5px; margin:3px;">
            We are all Opaque.
        </div>
    </div>
</div>

出力：

ここに画像の説明を入力

于 2017-01-22T09:33:27.243 に答える
4

それは不可能です。不透明度は要素とそのすべてのコンテンツに対するものであり、それを「元に戻す」ことはできません。

0.8times1.0はまだ0.8であり、不透明度に 1 より大きい値を指定することはできません。そのため、できることは、不透明度のあるコンテナーから画像を取り出して、その中にあるかのように見せることだけです(by何らかの方法でその上に配置します）。

于 2013-10-18T19:01:04.673 に答える
3

不透明度は、要素と要素内のすべての子/コンテンツに適用されます。

部分的に透明な色には、RGBA bg 色を使用します。

部分的に透明な背景画像の場合、JS/JQ ソリューションが必要です。

于 2013-10-18T19:00:44.903 に答える