Set my input boxes semi-transparent

Question

I couldn't find a way to render my input boxes semi-transparent. I have an image in the background. I mean only the background of my input boxes must be semi-transparent, not the text.

Any idea?

Here is an example of my html code

<h2>Connexion</h2>
<div>
    <label for="UserName">Username</label>               
    <input data-val="true" data-val-required="Le nom d&amp;#39;utilisateur est requis" id="UserName" name="UserName" type="text" value="" />                             
</div>
<div>
    <label for="Password">Password</label>
    <input data-val="true" data-val-required="Le mot de passe est requis" id="Password" name="Password" type="password" />              
</div> 

Answer 1

If you mean that there is a background image that you want to be able to see through your input boxes then you can just user rgba() when setting the background-color of an input:

input {
    background-color: rgba(255, 255, 255, 0.5);
}