CSSで不透明度を定義したdiv内の要素の不透明度を設定しますか？

私はメニューの背景として画像を使用しているプロジェクトに取り組んでいます。私はアイテムが「選択」されていないとき、つまりアイテムがリンクされているページにユーザがいないということを意味するクラスをCSSスタイルシートに定義しています。CSSで不透明度を定義したdiv内の要素の不透明度を設定しますか？

イメージの上にdivを配置して、半透明の白い背景にするためにスタイルを適用しているので、イメージの一部が強調表示されているように見えます。各半透明divには、リンクを構成するテキストも含まれ、色は白に設定されます。私は、不透明度を維持するdivを、テキストは "1"の不透明度のままにします。

私は同様の質問（CSS - Apply Opacity to Element but NOT To Text Within The Element）で議論された方法を試しましたが、この方法は私にとってはうまくいかないようです。

JSFiddleのリンクのコードをhttp://jsfiddle.net/Cwca22/uG5y8/に投稿しましたので、ご覧ください。

ご協力いただきありがとうございます。

出典

2011-12-22 Cody Capella

私の問題、Kolink、Nacho、techfoobar、jblascoにお返事いただきありがとうございます。今はすべていいですから、もう一度感謝します。 ; ^） –

を役に立てば幸い、と、少しあなたのマークアップを変更するには、この例を見てみて喜んでいる：それは扱い

http://jsfiddle.net/jJ4MZ/3/

それぞれの "リンク"を別々の背景とテキストの要素の組み合わせとして使用し、それらを相互に配置して、背景のdivのみが透明性を使用するようにします。

出典

2011-12-22 20:00:22 justis

商用プロジェクトでコードを使用しても問題ありませんか？私は必要に応じて少し修正しましたが、私はそれがあらかじめ使用されていることを確認したかったのです。 –

問題なく、助けてうれしい！ – justis

申し訳ありませんが、素晴らしい、おかげでトン！ –

まだ標準的な解決策がない古い問題です。これは今日のCSSでは不可能であることが知られています。私が知っている唯一の解決策は、JSを使用することです。 JSを使用すると、影響を受けるH＃のmousemoveをキャッチし、要素を作成/配置できます。この新しい「オーバー」要素は、不透明度0.2のDIVの子であってはなりません。

出典

2011-12-22 19:12:55 techfoobar

さて、私はそれを試してみる必要があります、ありがとう。私はこれらの問題を解決するためにまだ定義されていないことは驚きです！ –

はい、真剣です。私はこの問題が、CSS2が設計中であった時から何かあると信じています。これまでの日付を達成するためにゼロ標準のクロスブラウザの方法！ – techfoobar

あなたが正しく理解している場合は、divの背景色を部分的に透明にしてイメージを表示し、テキストを不透明にしますか？それは簡単です：3

<div style="background-color: rgba(255,255,255,0.5);">Text</div>

あなたはこの形式を許可していないブラウザのサポートを提供する場合は、あなたが必要とする：

<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>

出典

2011-12-22 19:20:54

私はこのような問題のためにjsFiddleを書いたら。ここにはhttp://jsfiddle.net/A53Py/5/

不透明度なしで要素の背後に絶対配置する同じレベルの要素を作成します。 クロスブラウザを伝える必要はありません。

あなたは純粋なCSSのソリューションを探しているなら、それは

出典

2011-12-22 19:32:12

CSSで不透明度を定義したdiv内の要素の不透明度を設定しますか？

答えて

関連する問題