Question

我身体的背景色是#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并寻找透明成功的演示，您可以看到弹出窗口在白色背景上的透视效果。我需要在没有使用图像的情况下做这样的事情，因为他们正在使用图像。

Answer 1

听起来你想要一个透明的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);    
}

Answer 2

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

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

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

或者，因为您使用渐变，我会使用它：

Ultimate CSS Gradient Generator

它允许您使用渐变进行半透明背景。

如何在白色背景上使div透明？

2 个答案: