当我在它下面插入 p 或 span 时，html 背景图像在输入中消失了

Answer 1

当您在第二个输入之后放置一个 p 元素时，该输入不再是最后一个子元素。

在这种情况下，您可以通过使用 last-of-type 来解决这个问题：

form {
  background-color: blue;
}

input {
  background-color: transparent;
  border: 1px solid white;
}

input:first-of-type {
  background-image: url(https://picsum.photos/id/1015/300/300);
  background-repeat: no-repeat;
}

input:last-of-type {
  background-image: url(https://picsum.photos/id/1015/300/300);
  background-repeat: no-repeat;
}

<form action="">
  <input type="text" name="" id="" />
  <p>text</p>
  <input type="password" name="" id="" />
  <p>text</p>
</form>

同样，当前面有一个 p 元素时，您可以对第一个输入使用 first-of-type 来覆盖这种情况。