如何将不透明度设置为div的背景颜色？

Question

我有这个班级

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

我的问题是如何才能将不透明度设置为白色背景，以便它与我的背景混合？

谢谢。

Answer 1

我认为rgba是最快最简单的！

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

Answer 2

CSS 3引入了rgba colour，您可以将其与backwards compatible解决方案的图形结合使用。

Answer 3

我认为这涵盖了所有浏览器。我过去成功使用过它。

#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 */
}

Answer 4

我想说最简单的方法是使用透明背景图像。

http://jsfiddle.net/m48nH/

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

Answer 5

您可以这样使用CSS3 RGBA：

rgba(255, 0, 0, 0.7);

0.7表示70％的不透明度。