2011-01-18 22 views
27

私のdiv内の白の背景色は半透明で約50%にしたいだけです。内容は完全に不透明でなければなりません。これを行う適切な方法は何ですか? background CSS propertyを調べると、不透明感の設定が見つかると思いましたが、そうではありませんでした。 IE6は気にしないでください。divの背景色を半透明にするにはどうすればいいですか?

UPDATE:CSS3PIE's solution for getting rgba to work in IE browsersと併せて下記のRGBA溶液を用いて解きます。

+0

私はあなたが*背景画像の*だけ白い部分の50%の半透明をしたいと言って、これを読むことができ、かつ任意の非白い部分は不透明なまま。私はあなたが何をしているの?これまでのすべての答えは、完全な画像の不透明度に対処しています。 –

+0

@Stephen P、あなたの解釈が有効である間、私は**彼は 'div'が白の' background-color'を持ち、その色が50%透明であることを望んでいると思います**。私は彼がCSS画像マスク型のものではないと思う。 –

+0

あなたは正しいです –

答えて

47

あなたはbackground-color: rgba()表記を使用することができます(rgba()表記を理解していないブラウザのための)デフォルトbackground-colorを追加するために編集

#theIdofYourElement, 
.classOfElements { 
    background-color: #fff; 
    background-color: rgba(255,255,255,0.5); 
} 


を。私がIEを除くすべての人がを実行するという印象を受けていたにしても、はそれを理解しています(しかし、私は間違っている可能性があります。

@akamikeに感謝して編集してください。


編集は(コメントで)OPからの質問に対処する:ブラウザはRGBAを理解していない

?彼らはすべて将来、css3のこの部分ですか?

ベスト情報はthe CSS Tricks' rgba() browser support tableで、a link to a demo and 'more complete' compatibility tableです。

+0

It rgbaを理解していないブラウザはバックグラウンドを持たないため、rgba宣言の前に実線のrgbまたは16進の背景色を宣言してください。 – akamike

+0

これは私が探しているものですが、どのブラウザがrgbaを理解できないのですか?彼らはすべて将来、css3のこの部分ですか? –

+0

@at:更新された回答を見る=) –

4

最も簡単な方法は、半透明のPNGを作成し、それをdivの背景画像として使用することです。

Photoshop(または同様のツール)を使用している場合は、すべてが白である10ピクセル×10ピクセルのイメージを作成してから、不透明度スライダを50%にドラッグします。 PNG形式で保存してください。

RGBAを使用することも可能ですが、IE6を失うだけでなく、まだアルファ版をサポートしていないブラウザを使用している人がかなりいます。

+1

これは簡単です!しかし、私はrgbaソリューションがより好きです –

+1

あなたがすでにmodernizrを使用しているなら、この解決策は実行可能な代替手段になります。 – gillytech

13

あなたはクロスブラウザの不透明度をしたい場合は、あなたがあなたのCSS定義内の各を扱うことができる

div 
{ 
    opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */ 
    filter: alpha(opacity=50); /* IE lt 8 */ 
    -ms-filter: "alpha(opacity=50)"; /* IE 8 */ 
    -khtml-opacity: .50; /* Safari 1.x */ 
    -moz-opacity: .50; /* FF lt 1.5, Netscape */ 
} 
+0

+1完全な答え=) –

+6

これはdivの前景を50%も透明にします。 – minichate

+1

これはフォアグラウンドも半透明にします。 –

1

(CSSで既に利用され、透明性とは対照的に)backdrop-filterが本当の半透明性を提供すると呼ばれるCSSプロパティがあります。

現在、Safariでのみサポートされていますが、他のブラウザに追加されている可能性があります。

.my-selector { 
    backdrop-filter: blur(5px); 
} 
関連する問題