透明な背景、不透明な要素

bodyの画像の背景と、divの半透明の背景を持っているので、画像は透けて見えます。しかし、最も簡単な透明な背景、不透明な要素

body { 
    background-image: ... 
} 

#main { 
    background-color: #999; 
    opacity: 0.9 
}

も#main内のすべてのものが同様に不透明になります、どのようなはimgを含んでいました。

私は何を記述していますか？

おかげ

出典

2011-10-26 Amadan

RGBAはあなたを助けますが、それはすべてのブラウザでサポートされていません

使用：あなたは、あなたがすべき50％赤の背景をしたい場合はそう

rgba(a,b,c,d), where a = red(0-255); b = green(0-255); c = blue(0-255), d = alpha opacity(0-1)

使用

背景：rgba（255,0,0,0.5）;

出典

2011-10-26 11:17:45 Sergiu

これは最もクリーンな答えです。一部の古いブラウザとの互換性のために、半透明のPNGが良い代替手段です。 –

半透明のPNGは古いIEバージョンで問題を抱えています...でもこの問題は解決できます – Sergiu

もちろん！/doh私は古くなったブラウザを気にしません。モノクロのバックグラウンドを得ることができて気になります。これは私を次の質問に導きます：もし私が 'color：#fee;色：rgba（240,240,255,0.5） '、私はそれが何をすると思いますか？（ie6は単色の '＃fee'を取得しますが、Chromeは' rgba'のオーバーライドを理解していますか？IE6はテストしていません:) – Amadan

あなたはピクセルのカップル大し、メインの背景画像として使用すると、目的の結果を得る必要があることを追加した後、あなたは色の半透明のPNGファイルを作成した場合。

出典

2011-10-26 09:20:27 ratpuddle

あなたはRGBAを（使用することができ、あなたのプロジェクトのためのCSS3を使用できる場合）

#main { 
    background-color: rgba(0, 0, 0, .5) 
}

構文はRGBA（赤、緑、青、アルファ）です。これにより#mainの背景は透明になりますが、内容は透明になりません。ここで

はフィドルです：http://jsfiddle.net/neilheinrich/FwxRX/

出典

2011-10-26 09:21:48 nheinrich

更新：フィドルが追加されました。 – nheinrich

透明な背景、不透明な要素

答えて

関連する問題