web-dev-qa-db-ja.com

divの背景色を半透明にする方法は？

Divの白の背景色を約50％だけ半透明にしたいだけです。コンテンツは完全に不透明でなければなりません。これを行う適切な方法は何ですか？ 背景CSSプロパティ を調べたとき、不透明度の設定が見つかると想像しましたが、見つかりませんでした。 IE6を気にしないでください。

[〜＃〜] update [〜＃〜]：下記のrgbaソリューションで解く rgbaをIE browsers で動作させるためのCSS3PIEのソリューションと組み合わせて。

csscss3opacity
30
at.

ブラウザー間の不透明度が必要な場合は、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 */
}
16
hunter

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

Photoshop（または同様のツール）を使用している場合、すべて白の10x10ピクセルの画像を作成し、不透明度スライダーを50％まで下にドラッグします。それをPNGとして保存してください。

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

4
minichate

backdrop-filterと呼ばれるCSSプロパティがあり、（CSSで既に使用可能な透明度とは対照的に）実際の半透明性を提供します。

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

.my-selector {
   backdrop-filter: blur(5px);
}
2
sandstrom