css - CSSで不透明度プロパティを継承しないようにするには?

Question

内部のテキストを不透明にしたいので、CSS ファイルに設定するdiv要素があります。opacity: 0.7;この 内にいくつかの画像を表示しますdivが、画像は継承された opacity プロパティで表示されます。結果は不透明な画像になります。

それらを含むの不透明度を継承しないように、画像にCSSプロパティを与えることは可能divですか? そうでない場合、画像が不透明にならないようにするにはどうすればよいですか?

ありがとう。

Answer 1

テキストを部分的に透明にopacityするためにを使用している場合は、要素の を設定するだけです。color

#elemId {
    color: rgba(0,0,0,0.7);
}

opacityこれにより、プロパティの調整を回避でき、プロパティをサポートするすべてのブラウザーでも機能するはずopacityです。

Answer 2

唯一の方法はポジショニングです。CSS Tricks の素晴らしい記事は次のとおりです: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

および top 値を使用position: relative;して、要素を互いに重ねます。

背景を透明にしようとしているだけの場合は、rgba()背景に値を使用できます。

編集：

ここにクレイジーなアイデアがあります。PHP GD を使用して、正しい位置に表示する白いテキストを含む灰色の背景 (透明にする) で画像をレンダリングできます。次にmask-box-imageまたはmask-imageCSS プロパティを使用して、レンダリングされたイメージに設定します。

もちろん、コンテンツが動的でない場合は、Photoshop などのプログラムで画像を作成できます。

アンチエイリアシングは、ブラウザから GD レンダーまで同じではありませんが、ポジショニングを使用したくない場合に最適なハックです。

Answer 3

CSS に次のコードを追加します。

Z-インデックス:111

できます。