背景图像被拆分

Question

我尝试添加背景图片以便在BetterCMS的联系表单后面，但出于某种原因，背景图片仅应用于我的表单的文本元素，如下所示;

我绝对不知道为什么会发生这种情况，我已经将Z-index设置为999，但它仍然不稳定！

对此的任何想法都将不胜感激！

HTML

    <div class="pull-right">
<div class ="formcontainer">
<form>

first name <br>

<input type="text" name="firstname"><br>
Last name <br>

<input type="text" name="lastname"><br>

Email <br>

<input type="text" name="email"><br>

Phone Number <br>

<input type="text" name="PhoneNumber"><br>

</form>
</div>
</div>

CSS

.formcontainer
{
    background-image:url("http://localhost:53514/uploads/image/7d595f93f6b343d1aeab5958bc844f91/bikes_1.png");
     z-index:9999;
}

Answer 1

您可以将表单元素设置为透明：

＆＃13;

＆＃13;

body {
   background-color: red;
}

input {
    background-color: transparent;
}

＆＃13;

<input type="text">

＆＃13;

＆＃13;

＆＃13;

默认情况下，它们具有可能来自操作系统的默认背景颜色。