Overlapping CSS elements with different opacity

I'm trying to overlap some text fields with transparency over a background that also has transparency, the problem is that the text fields appear opaque, as if they had no transparency applied, how can I manage for both the field and background to appear with a certain transparency?

This is the div that contains everything:

#wrapper {                                                                                                                                                              
  width: 940px;                                                                                                                                                         
  margin: 0 auto;                                                                                                                                                       
  background: rgba(0, 0, 0, 0.6);                                                                                                                                       
}  

And this is my input field:

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

This is how it looks:

---

Your code seems to be working great, it just doesn't look all that transparent as the .8 transparency of the black background creates a dark grey which perhaps you aren't quite distinguishing from fully opaque. If you want to check this on your local copy, apply a basic background image (eg http://purelycss.com/data-uri-tileable-transparent-patterns/) and you should be able to just about see it below your wrapper and input field.

EDIT: If you're looking to reduce the "black on black" effect, you might want to just reduce the opacity of the 'rgba' - so something more like rgba(0, 0, 0, 0.5) for example. If not this, changing the colour of the base RBG colour might help you out here. It's one of those things you probably just want to play with and tweak.

---

it looks like it a problem with the stacking of your transparency, to ahcieve a 0.8 transparency on the input box you jsut need to add a further 0.2 transparency to the input (as it has effectively inherited 0.6 of the 0.8 you require from its containing element. see here:

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;

链接地址: http://www.djcxy.com/p/28072.html

上一篇: 如何在CSS中更改背景颜色的不透明度

下一篇: 用不同的不透明度重叠CSS元素