将图像放在文本字段中

Question

我有一个像这样的HTML输入字段.我想在右侧的文本框中放置一个图像.有人可以帮我解决这个问题吗？

<input type="text" id="name"/>

在图片中是文本字段电子邮件地址内的图像,这是我想要的.你怎么做到这一点？

Answer 1

HTML

<div class="fake-input">
    <input type="text" />
    <img src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=25 />
</div>

CSS

.fake-input { position: relative; width:240px; }
.fake-input input { border:none; background-color:#fff; display:block; width: 100%; box-sizing: border-box }
.fake-input img { position: absolute; top: 2px; right: 5px }

工作演示

http://jsfiddle.net/HnJZa/

Answer 2

试试这个:

input { 
  background-image: url("icon.png");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: contain;
}