css - HTML＆CSS-如何在文本框中更改图像背景

Question

如何更改文本框标签的背景，当前我的文本框上有图像。



如您所见，文本框的右上角有一个二维码图像，我想对其进行更改。假设我希望此图像img/captureicon.png替换当前图像。

我试图更改它，但是它不起作用或什么也没显示。

这是如上所示的图像文本框的代码。

.qrcode-text-btn {
  display:inline-block; background:url(//dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg) 50% 50% no-repeat; height:30px; width:40px; margin-top:8px; margin-left:-40px; cursor:pointer
}

我尝试将其更改为此，但没有用。

.qrcode-text-btn {
  display:inline-block; background:url(img/captureicon.png) 50% 50% no-repeat; height:30px; width:40px; margin-top:8px; margin-left:-40px; cursor:pointer
}

我完整的CSS代码

    <style type="text/css">
    body, input {
      font-size:14pt
    }

    input, label {
      vertical-align:middle
    }

    .qrcode-text {
      padding-right:1.7em; margin-right:0
    }

    .qrcode-text-btn {
      display:inline-block; background:url(//dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg) 50% 50% no-repeat; height:30px; width:40px; margin-top:8px; margin-left:-40px; cursor:pointer
    }

    .qrcode-text-btn > input[type=file] {
      position:absolute; overflow:hidden; width:1px; height:1px; opacity:0
    }

  </style>

这是我的html代码，用于结束文本框和文本框的内部图像。

 <input type=text size=16 placeholder="Tracking Code" id="qrcid" name="qrid" class=qrcode-text>
          <label class=qrcode-text-btn>
            <input type=file accept="image/*" capture=environment onclick="return showQRIntro();" onchange="openQRCamera(this);" tabindex=-1>
          </label> 

Answer 1

我猜无法从image / capture icon.png加载图像，因为如果您将绝对URL放入CSS，则会显示该图像。

   .qrcode-text-btn {
   display:inline-block; background:url(/image/qhAwK.png) 50% 50% 
   no-repeat; height:30px; width:40px; margin-top:8px; margin-left:-40px; 
   cursor:pointer
    }

因此，请检查您的图像以及文件名和路径。