透明部分を持つdiv上で不透明なテキストを取得する方法は？

Question

私はこれについてGoogleでいくつかの検索を行い、さまざまな例がたくさんあり、時代遅れのものもあります。

http://www.w3schools.com/Css/css_image_transparency.aspの下の例も、私が達成したいと似ています。この例では、divのテキストも透明ですが、白いdivの黒いテキストであるため見えにくいです。

私はそれに黒い要素が多く、その上に55％の不透明度の黒いdivがあります。背景の画像の非常に暗い要素の上に白いテキストを追加すると、私が望まない白い文字で少し見える。

これを達成する方法（透明なpngまたはcssのいずれか）に関する最新の例/ベストプラクティスをお持ちの方？ IE 6をサポートする必要はありません。

ありがとうございます。私は、テキストは透明でなければならないと思った

Answer 1

ミランはほとんど正しいです。透明なdivの背景をRGBで透明にしたいと思うでしょう。黒の場合は（0,0,0）になります。透明度を追加するには、単に「不透明度：0.55」に似た小数（追加したいCSSのために、その55％の不透明な黒の背景を取得するには、例を作るために、そう

background: rgba(0,0,0,0.55); 

を使用したいですDIV /白いテキスト、使用wの55％の不透明度背景と：

.blackopaque { 
    background:rbga(0,0,0,0.55); 
    color:#ffffff; 
} 

「背景」は背景を変更し、色、テキスト（この場合、白色）の色を変更 ホープこのことができます。 ！ マット

EDIT：IE Sup port IEへのサポートを追加するのは簡単です。あなたがしなければならないのは、特にそのIE用の独自のスタイルシートを持つIEユーザーです。あなたのテーマのヘッダーファイルを開きます。IE.cssという名前の透明な黒の効果を得るために透明なPNGを使用してIE用に特別に設計されたスタイルシートがあるとしましょう。あなたは既存のCSSを含めるの下にこのコードを挿入したいと思います：

<!--[if IE]> 
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/IE.css" /> 
<![endif]--> 

エヘン、より高度なブラウザの残りの部分はRGBAを楽しむことができるように、この条件付きスタイルシートは、唯一のIEユーザーに自身が利用できるようになります。ようにIEのスタイルシート内の1つのルールは、ちょうどそれがデフォルトルールをオーバーライドすること

.blackopaque { 
background:url('*link to your 55% opaque png file*') 
color:#ffffff; 
} 

NOTEあなただけ含める必要があるだろう：IEのスタイルシートについては

は、あなたがこのような何かをしたいと思いますその背景のために。

Answer 2

申し訳ありませんが、ここでは透明な背景

#content { 
    position:relative; 
    z-index:1; 
} 

#content:before { 
    content:""; 
    position:absolute; 
    z-index:-1; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background:url(your_image.jpg); 
    opacity:0.7; 
} 

Answer 3

RGBAはIE9までサポートされていませんので、IEの以前のバージョンをサポートする必要がある場合は、半透明のPNGだけです。