如何设置HTML表单的半透明背景与文本字段中的图像 - How to set semi transparent background of HTML form with images in text fields

How to set semi transparent background of HTML form with images in text fields

嗨，我想创建一个简单的HTML与semi transparent background表单，我还想在文本字段(输入字段)的左边设置一个图像。

下面是我看到表单的例子:

我的需求的演示

在这个表单中，每个输入类型的左侧都有一个图标，并且表单是semi transparent.

通过css或html是否有办法做到这一点?

请帮帮我…

你可以用CSS

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

Css文件:

input {
    background-image:url('mon-image.png');
}
.form-container{
     background-color:rgba(255,255,255,0.8); 
}

你也可以创建一个白色的半透明PNG文件，大小为32x32像素，并使用它作为背景图像，并在X和Y上重复它

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

最后一种方法适用于大多数web浏览器

在CSS中你可以这样做:

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

您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba(上阅读更多信息

您可以为这些图像提供opacity，以便通过CSS查看semi transparent

img
{
 opacity:.6;
}

使用CSS最简单的方法是

opacity: 0.5;