1

我身体的背景颜色是#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并寻找透明成功的演示，你可以看到弹出窗口在白色背景上是如何看穿的。我需要在不使用图像的情况下做类似的事情，因为他们正在使用图像。

4

2 回答 2

3

听起来你想要一个 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);    
}
于 2013-05-08T16:09:12.410 回答
1

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

您需要更改背景而不是元素的不透明度：

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

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

终极 CSS 渐变生成器

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

于 2013-05-08T15:56:23.423 回答