css - 在输入字段中嵌入图像

我想在输入字段中嵌入图像。我正在使用z-index，但这不起作用。

标记如下所示：

<input class="form-control" type="text" id="cardNumber" name="cardNumber"
  [(ngModel)]="payment.cardNumber" #cardNumber="ngModel" required>

  <img src="..\assets\images\csc.jpg" id="inputImage">

和CSS：

#inputImage {
   height: 30px;
   width: 30px;
   position: absolute;
   /* left: 0px;
   right: 0px; */
   z-index: 1;
}

最佳答案

您是否要在输入中添加图像？如果是这样，您可以将输入的背景设置为所需的图像。

HTML：

<input class="form-control" type="text" id="cardNumber" name="cardNumber"
  [(ngModel)]="payment.cardNumber" #cardNumber="ngModel" required>

CSS：

#cardNumber{
   height: 30px;
   width: 300px;
   position: absolute;
   z-index: 1;
   background:url(https://cdn.pixabay.com/photo/2016/07/05/16/53/leaf-1498985_960_720.jpg) no-repeat right top;
}

小提琴：
https://jsfiddle.net/zomzhacb/