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

我想重叠一些文本字段透明度背景也具有透明度，问题是文本字段显示不透明，好像他们没有应用透明度，我该如何管理场和背景都以一定的透明度出现？重叠具有不同不透明度的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;                                    
}

这是它的外观：

enter image description here

来源

2012-10-19 8vius

请发布您的代码。 – j08691

请参阅下面的内容，只需清除任何背景图片，应用背景颜色并使用不透明风格 – JamieM23

您正在使用哪种浏览器？ – Champ

您的代码似乎是伟大的工作，它只是不举目皆是透明的黑色背景的0.8透明度创建一个深灰色这或许您还没有完全从完全不透明区分。如果您想在本地副本上查看此内容，请应用基本背景图像（例如http://purelycss.com/data-uri-tileable-transparent-patterns/），并且您应该能够在包装和输入字段下面查看它。

Your code works!

编辑：如果你正在寻找减少影响了“黑黑”，您可能希望只降低“RGBA”的不透明度 - 这样的东西更像是RGBA（0，0，例如0,0.5）。如果不是这样，改变基本RBG颜色的颜色可能会帮助你在这里。这是你可能只想玩和调整的东西之一。

来源

2012-10-19 16:05:34

是的，这是黑色交易的黑色，任何方式来实现我想要的？ – 8vius

我已经用一些可以帮助你的信息更新了我的帖子。 – 2012-10-19 16:08:28

是的，这个技巧已经足够好了，谢谢乔。 – 8vius

它看起来喜欢它的透明度叠加的问题，达到0.8吨您需要在输入框上添加透明度（因为它已经从包含元素中有效地继承了0.6所需的0.8）。在这里看到：

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

来源

2012-10-19 15:54:01 JamieM23

没有工作，文本字段仍然显示为不透明。 – 8vius

新的答案，这应该工作，你提到的不透明是由于其父母的继承透明度，所以通过其容器的数量减少元素不透明度应该达到你以后的效果。 – JamieM23

谢谢杰米，乔已经提出这个问题，所以对不起，我现在不能接受你的答案，它确实有效。 – 8vius

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

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

来源

2012-10-19 15:58:24

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

回答

相关问题