14

透明な div 内のテキストに不透明度を持たないようにしようとしています。つまり、完全に黒くしようとしています。

<div style="opacity:0.6;background:#3cc;">
    <p style="background:#000;opacity:1">This text should be all black</p>
</div>

これはCSSだけで可能ですか？

前もって感謝します

4

3 に答える 3

13

最も簡単な方法は、不透明度/アルファを使用して親 div の背景をスタイルすることです。

div  {
    background: #fff; /* for browsers that don't understand the following rgba rule */
    background-color: rgba(255,255,255,0.5); /* rgb, white, with alpha at 0.5 */
}

ただし、これは IE と互換性がありません。

IE >= 7 との互換性のために、次を使用できます。

div  {
    background-image: url('path/to/partially_transparent.png');
    background-position: 0 0;
    background-repeat: repeat;
}

IE < 7 には独自のフィルター オプションがあることを思い出しましたが、残念ながらそれがどのように機能するか思い出せません。したがって、それを説明/表示する試みは省略しました。有用なリファレンスが見つかった場合は、後で追加します。

easwee が指摘したように、不透明度は含まれる要素によって継承されるため、オーバーライドできないため、background-color/background-imageアプローチを使用することを好みます。

于 2010-03-03T17:29:01.930 に答える
3

子要素は不透明度を継承します。できることは<p>、不透明な div の外側に配置し、負のマージンを設定してその上に移動することです。

私はこの問題に頻繁に遭遇し、通常はこのように解決しました。問題は、動的コンテンツがあり、div を展開する必要がある場合のみです。

于 2010-03-03T17:21:29.823 に答える
1

背景は単色で構成されていますか？その場合、RGBa を使用しdivて、その子に継承されない透明な背景色を選択することもできます。詳細、IE の回避策、および別の解決策については、 RGBa Browser Supportを参照してください。

の背景がdiv無地でない場合は、透明な PNG を背景として使用できます。IE6 (および 5.5) では AlphaImageLoader を使用することを忘れないでください。

于 2010-03-03T17:31:13.063 に答える