Question

所以，现在我有一个注册表格，一个人必须输入他们的用户名，名字，姓氏等。

我正在玩一些CSS并且认为在文本框中放置一些图标会是一个好主意，但我似乎无法让它工作。

这是我对HTML的代码：

<input id ="regtxt" type="text" placeholder="Username" name = "user" maxlength="9"/>

这是我对CSS的代码：

#regtxt{
background-image:url('images/usericon.png');
left:no-repeat;
}

知道我做错了吗？

谢谢！

Answer 1

是。 left和no-repeat是background的一部分。试试这个：

#regtxt{
   background-image:url('images/usericon.png') left center no-repeat;
}

确保图像/路径正确，并且没有其他css规则覆盖此。

编辑：尝试使用内联图片：

#regtxt{
  background:url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) right center no-repeat;
}

演示：http://codepen.io/anon/pen/dPgpKv

文本框html css内的图标

1 个答案: