css - 具有不同不透明度的重叠 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

您的代码似乎运行良好，只是看起来并不那么透明，因为黑色背景的 0.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;