如何在白色主体背景上使 div 透明？答案

【问题标题】：How do I make a div transparent on a white body background?如何在白色主体背景上使 div 透明？
【发布时间】：2013-05-02 22:30:47
【问题描述】：

我身体的背景颜色是#ffffff。我有一个我需要的 div 是彩色的，但它需要是透明的或透视的。是否可以使用 CSS3 来做到这一点，还是我必须使用图像来实现这一点？

body {
background-color: #ffffff;
}
.box {
background-color: #999999;
    background-image: linear-gradient(to top, #999999 0%, #444444 100%) !important;
opacity: 0.7;
}

更新：

如果您访问此处：http://pinesframework.org/pnotify/#demos-simple 并查找“透明成功”的演示，您可以看到弹出窗口在白色背景上的透视效果。我需要在不使用图像的情况下做类似的事情，因为他们正在使用图像。

【问题讨论】：

如果你想让 CSS3 动画成透明，你会使用它……我不知道你想要什么？
@ryansaxe div 看起来不透明，因为背景是白色的。如果背景颜色不同会更好看。所以我很困惑如何解决这个问题..
所以你不是刚刚回答了你自己的问题吗？你想达到什么目的？
如果您访问此处：pinesframework.org/pnotify/#demos-simple 并查找“透明成功”的演示，您可以看到弹出窗口在白色背景上的透视效果。我需要在不使用图像的情况下做类似的事情，因为他们正在使用图像。
CSS - Opaque text on low opacity div?的可能重复

标签： css transparent

【解决方案1】：

更新：根据您在下面的评论，此问题似乎与 CSS - Opaque text on low opacity div? 重复。

你需要改变背景而不是元素的不透明度：

.box {
    rgba(255,0,0,0.6);
}

或者，由于您使用的是渐变，我会使用这个：

Ultimate CSS Gradient Generator

它将允许您使用渐变制作半透明背景。

【讨论】：

谢谢。但它也不应该适用于文本。如果你去这里：pinesframework.org/pnotify/#demos-simple 并查看透明成功的演示，你可以看到我正在尝试做的事情。我想要在白色背景上看起来透明的类似透明图像。

【解决方案2】：

听起来你想要一个 alpha 透明背景颜色。如果是这种情况，您可以使用 RGBA 颜色，而不是纯十六进制值和 opacity 属性。这样，只有背景有透明度，内容没有。

在你的情况下是：

.box {
    background-color: rgba(255,0,0,0.7);    
}

您还可以为不支持 RGBA（IE 8 和更早版本）的浏览器指定备用颜色，或使用您想要的颜色填充创建 PNG 图像。我的投票是渐进式增强，只需为不理解 RGBA 的浏览器指定一种替代颜色：

.box {
    background-color: #ff4c4c;
    background-color: rgba(255,0,0,0.7);    
}

【讨论】：