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

我想无法从img / captureicon.png加载图像，因为如果您在CSS中放入绝对URL，则会显示该图像。

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

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

Answer 2

我猜因为图片的源文件不是绝对的，所以无法加载图片。 您必须声明源文件的正确位置。

示例：

.qrcode-text-btn {   显示：行内块；背景：url（http://mysite.example.com/mycursor.png）50％50％不重复；高度：30px；宽度：40px; margin-top：8px;左边距：-40px;光标：指针 }