用不同的不透明度重叠CSS元素
我试图在具有透明度的背景上重叠一些带有透明度的文本字段，问题在于文本字段显示为不透明，就好像它们没有应用透明度一样，我如何管理字段和背景以显示有一定的透明度？
这是包含一切的div：
#wrapper {
width: 940px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
}
这是我的输入字段：
input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 30px;
padding-top: 5px;
background: rgba(0, 0, 0, 0.8);
color: white;
border: 1px solid black;
}
这是它的外观：
你的代码似乎工作得很好，它只是看起来不那么透明，因为黑色背景的.8透明度创建了一个深灰色，这可能与完全不透明区别不大。 如果你想在你的本地副本上检查它，应用一个基本的背景图像（例如http://purelycss.com/data-uri-tileable-transparent-patterns/），你应该能够在你的包装下面看到它和输入字段。
编辑：如果你想减少“黑色黑色”效果，你可能想减少'rgba'的不透明度 - 比如rgba（0,0,0,0.5）。 如果不是这样，改变基本RBG颜色的颜色可能会帮助你在这里。 这是你可能只想玩和调整的东西之一。
它看起来像是一个透明度堆叠的问题，为了在输入框中输出0.8透明度，你需要在输入中添加0.2透明度（因为它已经从其包含的元素有效地继承了0.6的0.8） 。 看这里：
http://jsfiddle.net/e6Z8N/1/
HTML：
<div id="wrapper">
<input type="text" />
</div>
CSS：
#wrapper {
width: 940px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
padding:50px;
}
input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 30px;
padding-top: 5px;
background: rgba(0, 0, 0, 0.2);
color: white;
border: 1px solid black;
}
您可能需要清除应用于输入元素的默认浏览器样式。
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;