页面中<input type="image">背景图不显示，DevTools可预览问题求助

页面中两个<input type="image">元素的CSS背景图无法正常显示，但在浏览器DevTools中直接查看背景图URL时能正常加载图片。

相关代码如下：

HTML代码 #

<div id="tocNavBtnsBar">
      <input type="image" id="tocShowBtn" onclick="showTOC(true)">
      <input type="image" id="tocHideBtn" onclick="showTOC(false)">
</div>

CSS代码 #

#tocHideBtn {
position: absolute;
top: 52%;
height: 5mm;
width: 5mm;
background-color: #787474;
cursor: pointer;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjIgMjIiPg0KCTxkZWZzPg0KCQk8Y2xpcFBhdGg+DQoJCQk8cGF0aCBmaWxsPSIjMDBmIiBmaWxsLW9wYWNpdHk9Ii41MTQiIGQ9Im0tNyAxMDI0LjM2aDM0djM0aC0zNHoiLz4NCgkJPC9jbGlwUGF0aD4NCgkJPGNsaXBQYXRoPg0KCQkJPHBhdGggZmlsbD0iI2FhZGU4NyIgZmlsbC1vcGFjaXR5PSIuNDcyIiBkPSJtLTYgMTAyOC4zNmgzMnYzMmgtMzJ6Ii8+DQoJCTwvY2xpcFBhdGg+DQoJPC9kZWZzPg0KCTxwYXRoIGQ9Im0zNDUuNDQgMjQ4LjI5bC0xOTQuMjkgMTk0LjI4Yy0xMi4zNTkgMTIuMzY1LTMyLjM5NyAxMi4zNjUtNDQuNzUgMC0xMi4zNTQtMTIuMzU0LTEyLjM1NC0zMi4zOTEgMC00NC43NDRsMTcxLjkxLTE3MS45MS0xNzEuOTEtMTcxLjljLTEyLjM1NC0xMi4zNTktMTIuMzU0LTMyLjM5NCAwLTQ0Ljc0OCAxMi4zNTQtMTIuMzU5IDMyLjM5MS0xMi4zNTkgNDQuNzUgMGwxOTQuMjkgMTk0LjI4YzYuMTc3IDYuMTggOS4yNjIgMTQuMjcxIDkuMjYyIDIyLjM2NiAwIDguMDk5LTMuMDkxIDE2LjE5Ni05LjI2NyAyMi4zNzMiIGZpbGw9IiNmZmYiIHRyYW5zZm9ybT0ibWF0cml4KC0uMDM1NDEtLjAwMDEzLS4wMDAxMy4wMzU0MSAxOS4wMiAzLjAyKSIvPg0KPC9zdmc+);
}

问题原因 #

<input type="image">本质是表单提交按钮，浏览器默认优先处理它的src属性加载图片，而非CSS的background-image。当src为空时，浏览器可能显示空白占位或直接忽略背景图样式。

解决方案 #

1. 替换为或

元素 #

将<input type="image">替换为更适合自定义样式的元素，比如<button>：

<div id="tocNavBtnsBar">
  <button id="tocShowBtn" onclick="showTOC(true)"></button>
  <button id="tocHideBtn" onclick="showTOC(false)"></button>
</div>

同时给按钮添加基础样式重置，避免默认样式干扰：

#tocShowBtn, #tocHideBtn {
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

原有背景图等CSS样式可直接保留。

2. 给添加透明src #

保留原有元素，添加一个透明像素的src值，让浏览器不再显示占位，从而正常渲染背景图：

<input type="image" id="tocShowBtn" onclick="showTOC(true)" src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==">
<input type="image" id="tocHideBtn" onclick="showTOC(false)" src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==">

3. 完善背景图CSS属性 #

确保背景图正确适配元素尺寸，添加以下CSS属性：

#tocHideBtn {
  /* 原有属性 */
  background-size: contain; /* 或cover，根据需求选择 */
  background-repeat: no-repeat;
  background-position: center center;
}

这能避免背景图因尺寸或重复设置导致不可见。

内容的提问来源于stack exchange，提问作者Alexandr Kruzer