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

问题描述：

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:

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.

答

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.

答

In CSS you can do:

background-color: rbga(255, 255, 255, 0.5);

答

You can provide opacity for these images to look semi transparent via CSS

Example

img
{
 opacity:.6;
}

答

The easiest way with CSS would be

opacity: 0.5;