如何在文本字段中设置带有图像的HTML表单的半透明背景

Question

Hi I want to create a simple HTML form with a semi transparent background also I want to set an image on the left in text field(input field).

Here is the example where I saw that form:

Demo Of my requirement

In this form there is icon on the left hand side in each input type and also the form is semi transparent.

Is there any way to do so either by css or html ?

please Help me.. Thanks in advance.

Answer 1

You can do that with CSS

<div class="form-container">
<form>
<input type="text" name="" value="">
</form>
</div>

Css File :

input {
    background-image:url('mon-image.png');
}

.form-container{
     background-color:rgba(255,255,255,0.8); 
}

You can also create a white semi transparent PNG file of 32x32 px and use it as background image and repeat it on X and Y

.form-container{
     background-image:url('my-transparent-png.png');
     background-repeat:  repeat ; 
}

This last method works with most of web browsers.