HTML和CSS - 如何更改文本框内的图像背景

Question

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

正如您所看到的，文本框右侧角有一个qr代码的图像，我想更改它。假设我希望此图像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加载图像，因为如果你只是在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 {display：inline-block;背景：网址（http://mysite.example.com/mycursor.png）50％50％不重复;高度：30PX;宽度：40像素;边距：8像素;保证金左：-40px;游标：指针}