如何在文本字段中使用图像设置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.

Answer 2

In CSS you can do:

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

You can read more about it at https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()

Answer 3

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

Example

img
{
 opacity:.6;
}

Answer 4

CSS的最简单方法是

opacity: 0.5;