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

Question

我想在输入字段中嵌入图像。我正在使用 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;
}

Answer 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; 
}

fiddle : https://jsfiddle.net/zomzhacb/