css - 在输入元素背景中设置图像不起作用

Question

我正在尝试在输入元素中设置图像，但图像未显示。

html:

    <div class="col-md-12">
        <input class="form-control ccnumber" type="text" id="creditCardNo" 
          formControlName="creditCardNo">
    </div>

CSS:

.ccnumber {
    background-image: url("creditcard.png");
    background-repeat: no-repeat;
    background-position: left;
    background-attachment: fixed;
}

Answer 1

检查图像的路径。您的代码工作正常。检查您的网络以查看未加载的原因。

.ccnumber {
    background-image: url("https://www.w3schools.com/css/img_fjords.jpg");
    background-repeat: no-repeat;
    background-position: left;
    background-attachment: fixed;
}

<div class="col-md-12">
    <input class="form-control ccnumber" type="text" id="creditCardNo" 
         formControlName="creditCardNo">
</div>