web-dev-qa-db-ja.com

不透明度をdivの背景色に設定する方法は？

このクラスがあります

.box { background-color:#fff; border:3px solid #eee; }

私の質問は、白い背景に不透明度を設定して、背景と混ざり合うようにするにはどうすればよいですか？

ありがとうございました。

htmlcssopacitybackground-color
25
EnexoOnoma

CSS 3では rgba colour が導入されており、グラフィックと組み合わせて 後方互換性 ソリューションを実現できます。

17
Quentin

rgba が最も速くて簡単だと思います！

background: rgba(225, 225, 225, .8)

25
Kevin Brown

これは、ほぼすべてのブラウザーに当てはまると思います。私は過去にそれを首尾よく使用しました。

#div {
    filter: alpha(opacity=50); /* internet Explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}
5
Phil

この方法でCSS3 RGBAを使用できます。

rgba(255, 0, 0, 0.7);

0.7は、70％の不透明度を意味します。

4
Umair Hamid

最も簡単な方法は、透明な背景画像を使用することです。

http://jsfiddle.net/m48nH/

background: url("http://musescore.org/sites/musescore.org/files/blue-translucent.png") repeat top left;
3
Joonas