在input框之前添加图标

在input框之前添加图片，想到了三种方法。

• 第一种，添加input背景图片，实现起来很简单

<input type="password" name="password" id="password" value="" /><br />

#password{
	width: 200px;
	height: 35px;
	outline: none;
	border: 1px solid blue;
	background: url(https://s2.ax1x.com/2019/04/04/A2iVgA.png) no-repeat 5%;
	background-size: 25px 25px;
}

• 第二种，在input框外部添加图片，再通过样式调整位置。比较麻烦。而且位置设置不灵活。详细设置点击

• 第三种是我自己想的，代码如下：

<div id="">
	<span id="img">密码：</span>
	<input type="text" name="password" id="password" value="" />
</div>

#img{
	width: 73px;
	height: 26px;
	background: url(img/pass02.svg) no-repeat right;	  
	display: inline-block;
}