Home/ Questions/Q 8706751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T03:41:32+00:00

I’m trying to overlap some text fields with transparency over a background that also

  • 0

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:

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 (e.g. http://purelycss.com/data-uri-tileable-transparent-patterns/) and you should be able to just about see it below your wrapper and input field.

    Your code works!

    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.

    • 0