为什么背景图像不适用于输入？

Question

我已将我的图像输入设置为带有背景图像的提交输入：

<input title="Search" class="searchButton" id="searchButton" type="submit" style="background-image: url(/cdn/png/search.png); height: 34px; width: 34px;" value="">

但随后显示为 this

请告诉我如何解决这个问题。

Answer 1

尝试使用 background-size、background-repeat 和 background-position。

.searchButton {
  width: 34px;
  height: 34px;
  
  background-color: black;
  border: 0px;

  background-image: url(https://dinblox.org/cdn/png/search.png);
  background-size: 28px;
  background-repeat: no-repeat;
  background-position: center;
}

<input title="Search" class="searchButton" id="searchButton" type="submit" value="">

或内联 CSS:

<input title="Search" class="searchButton" id="searchButton" type="submit" value="" style="width:34px;height:34px;background-image: url(https://dinblox.org/cdn/png/search.png);background-size: 28px;background-position: center;background-repeat: no-repeat;">

为什么背景图像不适用于输入？

Why is background-image not working for Input?

html

css

input

background-image