重叠具有不同不透明度的CSS元素

Question

我正在尝试将一些文本字段与透明度重叠在同样具有透明度的背景上，问题是文本字段显示为不透明，就好像它们没有应用透明度一样，我如何管理字段和背景出现一定的透明度？

这是包含所有内容的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;                                                                                                                                              
} 

它的外观如下：

Answer 1

它看起来像是透明度的堆叠有问题，要在输入框上显示0.8透明度，你需要在输入中再添加0.2透明度（因为它有效地继承了你需要的0.8的0.6）它的含元素。见这里：

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;                                                                                                                                              
} ​

Answer 2

你的代码看起来效果很好，它看起来并不那么透明，因为黑色背景的.8透明度会产生深灰色，也许你并不完全不透明。如果您想在本地副本上进行检查，请应用基本背景图片（例如http://purelycss.com/data-uri-tileable-transparent-patterns/），您应该可以在包装和输入字段下方看到它。

编辑：如果你想减少“黑底黑”效果，你可能只想减少'rgba'的不透明度 - 所以更像是rgba（0,0,0,0.5），例如。如果不是这样，更改基本RBG颜色的颜色可能会帮助你。这是你可能只想玩和调整的事情之一。

Answer 3

您可能需要清除应用于输入元素的默认浏览器样式。

-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;