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

Posted 2023-02-21

【中文标题】如何将不透明度设置为 div 的背景颜色？ [复制]

【英文标题】：How to set opacity to the background color of a div? [duplicate]

【发布时间】：2011-10-01 06:05:39

【问题描述】：

我有这门课

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

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

谢谢。

【问题讨论】：

只需输入您需要的确切颜色而不是白色.. :)

@kvijayhari — 假设背景是纯色。

我不是那个意思，我需要将它与我的白色“混合”

看热门***.com/questions/806000/…

【参考方案1】：

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

【讨论】：

当我必须对前端代码做一些事情时，这就是我的工作方式。有用的答案。

你是对的..但我不明白这个的必要性..你能解释一下吗..看看dorward.me.uk/www/css/alpha-colour/demo-3.html的例子，没关系..但为什么可以'不只是把 #7F0080 的背景颜色作为该示例中的半透明颜色结果.. 最重要的是所有浏览器都支持..

虽然这使用了“后备图像”，但在我看来并不是一个好主意。

@kvijayhari — 因为半透明元素重叠了不止一种纯色的东西。

@Phil — 我说过你可以将它与图形结合起来以实现向后兼容性，你不必这样做。如果您想在不支持 rgba 的浏览器中使用纯色，那么这也是一种选择。

【参考方案2】：

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

http://jsfiddle.net/m48nH/

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

【参考方案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 */

【讨论】：

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

是的，这就是 OP 想要的。

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

@Phil — 问题是“白色背景”

@Lollero — 不使用 opacity，这适用于整个元素。

【参考方案4】：

我觉得rgba是最快最简单的！

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

【参考方案5】：

您可以通过这种方式使用 CSS3 RGBA：

rgba(255, 0, 0, 0.7);

0.7 表示不透明度为 70%。