CSS元素不透明度，不影响其内容的透明度

Question

我正在尝试创建一个不透明度为60％的<div>。我希望<div>的内容清晰明了，不透明。

类<div>的{​​{1}}应该具有60％透明度的白色背景色，但white_bg内的文字和图像应该清晰且根本不透明。

这可能吗？

请注意，带有<div>类的段落中的文字将是动态的，高度将始终改变，因此我不能只为main_content类设置宽度和高度，使用绝对位置并将其放在段落后面。

HTML

white_bg

Answer 1

您可以使用css3的rgba（）设置带有alpha值的背景颜色，然后使用透明的png进行IE浏览。

Answer 2

你最好使用半透明png作为背景。

Answer 3

作为fantactuka提及的半成语，或使用位置在您的透明div上放置不透明的内容，这篇博文：

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

Answer 4

我正在为chrome，FF和IE设置代码..第一个代码虽然适用于ie9及以上，但第二个代码适用于e9以下

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

Answer 5

使用半透明图像，或将此css应用于元素：

.white_bg {
    background-color: rgba(255, 255, 255, 0.5);
}

Answer 6

对于你white_bg课程，请使用：

.white_bg
{
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}

在这四个属性之间，您的基础应该适用于任何主要浏览器。