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

Я думаю, изображение не может быть загружено, поскольку исходный файл изображения не может быть абсолютным. Вы должны указать правильное местоположение вашего исходного файла.

Пример:

.qrcode-text-btn { Дисплей: встроенный блок; фон: url (http://mysite.example.com/mycursor.png) 50% 50% без повтора; высота: 30px; ширина: 40px; margin-top: 8px; margin-left: -40px; курсор: указатель }

Answer 2

Я думаю, изображение не может быть загружено из img / captureicon.png, потому что, если вы просто поместите абсолютный URL в ваш CSS, оно будет отображено.

   .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
    }

Так проверьте ваше изображение и имя файла + путь.