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

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

Answer 2

您也可以将图像设置为背景：

<强> HTML：

  <input type="text" class="date-picker">

CSS：

.date-picker{
    background: url(calendar.svg) no-repeat right;
}

DEMO

在输入字段中嵌入图像

2 个答案: