CSS 将图像放入输入框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7062383/
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
Putting a image inside a input box
提问by Jason94
Similar to Put icon inside input element in a form
But how to I get the icon inside and on the right sideof the box?
但是如何在框的内部和右侧获取图标？
回答by Bazzz
Try this:
尝试这个：
background: url(images/icon.png) no-repeat right center;
The explanation for this CSS is as follows:
这个CSS的解释如下：
background: [url to image] [don't repeat] [horizontal position] [vertical position]
背景：[url to image] [不重复] [水平位置] [垂直位置]
回答by Chris
As an addition to Bazzz's answer, if you don't want the icon right up against the right border, you can specify padding on the right side.
作为Bazzz 答案的补充，如果您不希望图标紧靠右边框，您可以在右侧指定填充。
background: url(images/icon.png) no-repeat right 10px center;
This will put the icon on the right side, but keep it 10 pixels from the very edge. So, the CSS explanation would look like this:
这会将图标放在右侧，但保持距离最边缘 10 个像素。所以，CSS 解释看起来像这样：
background: [URL to icon] [specify no repeating] [horizontal position] [padding on right side] [vertical position]
背景：[图标的 URL] [指定不重复] [水平位置] [右侧填充] [垂直位置]
回答by SandroMarques
Using image and SVG. Padding works well in all browsers (mars 2017)
使用图像和 SVG。填充在所有浏览器中运行良好（mars 2017）
Image file
图像文件
.date_element {
background-image: url(../img/calendar.png);
background-repeat: no-repeat;
background-position: right center;
background-origin: content-box;
}
SVG file
SVG文件
.date_element {
background-image: url(../img/calendar.svg);
background-repeat: no-repeat;
background-position: right center;
background-origin: content-box;
background-size: 2.5rem 2.5rem;
}
回答by Paul
Same answer except change padding-leftto padding-right, and change the positioning of the background.
相同的答案，除了更改padding-left为padding-right，并更改背景的定位。
Something like:
就像是：
background: url(images/comment-author.gif) no-repeat scroll right;
padding-right: 30px;
