Html 将图像放在文本字段中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20740523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Place an image inside a text field
提问by user3128920
I have an HTML input field like this. I would like to place an image inside the textbox on the right side. Can someone help me out with its CSS for that?
我有一个这样的 HTML 输入字段。我想在右侧的文本框中放置一个图像。有人可以帮我解决它的 CSS 吗？
<input type="text" id="name"/>
In the picture is an image which is inside the text field email address, which is what I want. How do you do this?
图片中是文本字段电子邮件地址内的图像，这就是我想要的。你怎么做到这一点？
回答by Paul Rad
HTML
HTML
<div class="fake-input">
<input type="text" />
<img src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=25 />
</div>
CSS
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 }
Working demo
工作演示
回答by user1706618
try this:
尝试这个：
input {
background-image: url("icon.png");
background-position: right top;
background-repeat: no-repeat;
background-size: contain;
}
回答by gaurav5430
you can try something like this
你可以试试这样的
.textBox{
background-image:url(iconimage.jpg);
background-position:right;
background-repeat:no-repeat;
padding-left:17px;
}
Then apply this style to your text box:
然后将此样式应用于您的文本框：
<input type="text" class="textBox" />
回答by Manoj
回答by user7873511
.text3 {
width: 300px;
height: 30px;
}
#text3 {
background-image: url(https://cdn3.iconfinder.com/data/icons/interface-8/128/InterfaceExpendet-09-128.png);
background-size: 30px;
background-repeat: no-repeat;
}
input {
text-align: center;
}<p class="email">
Email
</p>
<input type="text" placeholder="Email_ID" class="text3" id="text3">回答by nu everest
The answers above didn't replicate the format shown in the questioners image, or provide any explanation. This is a solution using background images.
上面的答案没有复制提问者图片中显示的格式，也没有提供任何解释。这是使用背景图像的解决方案。
Explanation of the background image syntax.
背景图像语法的解释。
background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white;
- Location of image: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png')
- Show image once: no-repeat
- Distance from left: 97.25%
- Distance from top: 10px
- Background color: white
- 图片位置：url(' https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png')
- 显示图像一次：不重复
- 与左边的距离：97.25%
- 距离顶部：10px
- 背景颜色：白色
.bg-email-icon {
background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white;
padding-left: 5px;
padding-right: 50px;
width: 255px;
height: 30px;
border: 1px gray solid;
border-radius: 5px 5px 0px 0px;
}
.bg-lock-icon {
background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/lock-icon.png') no-repeat 96.75% 10px white;
padding-left: 5px;
padding-right: 50px;
width: 255px;
height: 30px;
border: 1px gray solid;
border-top-width: 0px;
border-radius: 0px 0px 5px 5px;
}<input name="exampleEmail" class="bg-email-icon" placeholder="Email" type="email">
<input name="examplePassword" class="bg-lock-icon" placeholder="Password" type="password">回答by tilda
You can add class to your input
您可以将类添加到您的输入
<input type="text" id="name" class="inputImage" />
and then background image to class in css
然后将背景图像添加到 css 类中
.inputImage
{
background:#FFFFFF url('img.jpg') no-repeat top right;
}
回答by richa_pandey
You need to add class like this:
您需要添加这样的类：
CSS:
CSS：
.bgInput {
background: url(path of your image.jpg) top right no-repeat;
}
HTML:
HTML：
<input type="text" class="bgInput" id="name"/>
回答by Kunj
A small answer: you can do this by setting as a background image of input field.
一个小答案：您可以通过设置为输入字段的背景图像来做到这一点。
回答by C_B
try:
尝试：
#name {
background: url('path/image.png') right no-repeat;
}
