在輸入字段中嵌入圖像

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

來源

2017-10-07 koque

您是否希望將圖像添加到輸入？如果是這樣，你可以將輸入的背景設置爲你想要的圖像。

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/

來源

2017-10-07 16:12:04

您還可以設置圖片爲背景：

HTML：

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

CSS：

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

DEMO

來源

2017-10-07 18:27:23 Vega

在輸入字段中嵌入圖像

回答

相關問題