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

Question

我有这个类

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

我的问题是，我如何仅对白色背景设置不透明度，以便它可以与我的背景混合？

谢谢。

- EnexoOnoma

---

只需将您需要的确切颜色放在白色的位置即可。 :) - Vijay

@kvijayhari - 假设背景是纯色的。 - Quentin

我不是指那个，我需要将它与我的白色混合。 - EnexoOnoma

请查看流行的https://dev59.com/_XRA5IYBdhLWcg3w1BqW。 - Adriano

Answer 1

我认为rgba是最快和最简便的！

背景: rgba(225, 225, 225, .8)

- Kevin Brown

Answer 2

CSS 3引入了rgba颜色，你可以将其与图形结合使用，以实现向后兼容的解决方案。

CSS 3 引入了 RGBA 颜色，并且您可以将它与图形相结合，以实现向后兼容的解决方案。请注意保留 HTML 标记。

- Quentin

---

这是我在处理前端代码时一直使用的工作方式。有用的答案。 - Andrzej Ośmiałowski

你说得没错。但我不明白这个的必要性。你能解释一下吗？看看这个例子：http://dorward.me.uk/www/css/alpha-colour/demo-3.html，它可以用那个。但为什么不能直接把背景颜色设为#7F0080，这是半透明颜色在那个例子中的结果。最重要的是，所有浏览器都支持这种方法。 - Vijay

这里使用了“备用图片”，但在我看来并不是一个好主意。 - Phil

@kvijayhari - 因为半透明元素会覆盖多种实色的物体。 - Quentin

@Phil — 我说过你可以将它与图形结合以实现向后兼容性，但你不必这样做。如果您想在不支持rgba的浏览器中使用纯色，则也可以选择此选项。 - Quentin

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

- Phil

---

适用于整个元素，而不仅仅是背景。 - Quentin

是的，这就是原帖作者想要的。 - Phil

是的，这不是完全没有麻烦，但你可以让它只改变背景透明度。@Phil 不能确定这一点... 没有提到这个.box里面是否有任何内容。 - Joonas

@Phil — 问题说的是“到白色背景”。 - Quentin

@Lollero — 不要使用 opacity，因为它会应用于整个元素。 - Quentin

Answer 4

您可以这样使用CSS3 RGBA：

您可以这样使用CSS3 RGBA：

rgba(255, 0, 0, 0.7);

0.7 表示 70% 的不透明度。

- Umair Hamid

Answer 5

我认为最简单的方法是使用透明背景图像。 http://jsfiddle.net/m48nH/

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

- Joonas