不透明度显示为灰色的黑色 Div答案

【问题标题】：Black Div with Opacity showing as Gray不透明度显示为灰色的黑色 Div
【发布时间】：2013-11-30 00:20:24
【问题描述】：

我有一个带有浅色背景的 div 和一个里面的 div。我想给内部 div 的背景颜色一个透明的黑色（意味着我应该能够看到父 div 的一些浅色背景）。用 CSS 能做到吗？

我试过了，但它不起作用，div 显示为灰色且不透明。

<div style="width: 600px height: 600px;background:#fcfcfc;position:relative; ">

    <div style="position:absolute;top:200px:left:200px;height:200px;width:200px;background:rgba(0,0,0,0.6); ">
    </div>
</div>

如果我有深色背景，则不透明度可以正常工作。

谢谢！

【问题讨论】：

它是灰色的，因为它有 white 通过 black 显示出来；只有当有可见的东西通过/在具有alpha-transparency的元素可见时，透明度才明显；演示：jsfiddle.net/davidThomas/8L8DH/3
所以这意味着没有办法实现我想要做的事情？我想可能是我希望得到一个有色黑色玻璃的外观，我想这是不可能的！我试图将一些图像/文字放在可以通过透明黑色背景看到的浅色背景上。
“我想给内部 div 的背景颜色一个透明的黑色” - 但这一切都有效，“灰色”正是“透明黑色”。更客观地了解你真正想要什么。
我更新了我的评论。希望我的目标很明确。
这是一张图片价值一千的情况之一（可能是令人困惑的单词）......

标签： css opacity

【解决方案1】：

您可以使用opacity 设置Alpha 通道。这就是它的完成方式。

<div><div></div></div>

div {
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: relative;
}
div div {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 50px;
    height: 50px;
    background-color: gray;
    opacity: .5;
}

http://jsfiddle.net/GZj75/

【讨论】：