Html 将图像放置在文本字段中

我有一个像这样的HTML输入字段。我想在右边的文本框中放置一个图像。有人能帮我解决这个问题吗

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

---

图片中的图片位于文本字段电子邮件地址内，这是我想要的。你是怎么做到的？

你可以试试这样的东西

.textBox{  
background-image:url(iconimage.jpg);   
background-position:right;   
background-repeat:no-repeat;   
padding-left:17px;
}

然后将此样式应用于文本框：

<input type="text" class="textBox" />

---

您可以将类添加到输入中

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

---

您需要像这样添加类：

CSS:

.bgInput {
  background: url(path of your image.jpg) top right no-repeat;
}

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

HTML:

.bgInput {
  background: url(path of your image.jpg) top right no-repeat;
}

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

HTML

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

工作演示

---

一个小回答：您可以通过设置为输入字段的背景图像来完成此操作。

尝试：

#name {
      background: url('path/image.png') right no-repeat;
}

试试这个：

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

---

使用背景图像和背景位置属性

CSS:

.text3{
宽度：300px；
高度：30px；
}
#文本3{
背景图片：url(https://cdn3.iconfinder.com/data/icons/interface-8/128/InterfaceExpendet-09-128.png);
背景尺寸：30px；
背景重复：无重复；
}
输入{
文本对齐：居中；
}

电子邮件

上述答案没有复制提问者图片中显示的格式，也没有提供任何解释。这是一个使用背景图像的解决方案

背景图像语法的解释

background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white;

• 图像位置：url（“”）
• 显示图像一次：无重复
• 左距：97.25%
• 距离顶部：10px
• 背景颜色：白色

.bg电子邮件图标{
背景：url（'https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png’）无重复97.25%10px白色；
左侧填充：5px；
右边填充：50px；
宽度：255px；
高度：30px；
边框：1px灰色实体；
边界半径：5px 5px 0px 0px；
}
.bg锁定图标{
背景：url（'https://d1ululg65bfe3q.cloudfront.net/images/troy/lock-icon.png’）无重复96.75%10px白色；
左侧填充：5px；
右边填充：50px；
宽度：255px；
高度：30px；
边框：1px灰色实体；
边框顶部宽度：0px；
边界半径：0px 0px 5px 5px；
}

---

谢谢这很有帮助

background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white;