不透明度0.8のコンテンツボックスにYouTube iframeを配置しています
opacity: .8;
filter: alpha(opacity=80);
ただし、ビデオは透過的に表示され、サイトの背景が透けて見えます。可能な限り wmode を変更しようとしましたが、違いはありません。これは Firefox では発生しませんが、Chrome では発生します。
要素でCSS プロパティを使用するopacity
と、そのすべての子がそれを継承し、変更する必要はありません...
...ただし、透明な png 背景画像を使用するか、rgba()
またはhsla()
色の値を使用できます。
透明な黒いrgbaはhslaになりbackground: rgba(0, 0, 0, .5);
ますbackground-color: hsla(0, 0%, 0%, .5);
これらのプロパティは継承されないため、それらが何であれ、子には影響しません:)
ここでは、3 つの異なる CSS ルール (透明な png ではない) が使用されていることがわかります。最後の 2 つの子要素は影響を受けないことに注意してください :)
実際、それが機能するopacity
はずの方法です。背景だけでなく、要素とそのすべてのコンテンツに不透明度を設定します。半透明の背景だけが必要な場合は、透明な png のようなものをbackground-image
.
不透明度の代わりに半透明の .png を背景として使用することをお勧めします。背景色として rgba を使用することもできますが、IE には実装されていません。Rgba は IE 8 以下ではサポートされていないため (IE 9 については不明)、代わりにフィルターを使用して目的の効果を得ることができます。しかし、フォントの見栄えが悪くなってしまうことがあります (アンチエイリアスやその類の処理が削除されます)。
一方、1*1px の png は非常に小さく、css ファイルに組み込むことができます。