input框前追加图片

最新推荐文章于 2024-10-04 14:46:05 发布

码农Academy

最新推荐文章于 2024-10-04 14:46:05 发布

阅读量2w

点赞数 9

分类专栏：前端文章标签： html input框前追加图

本文链接：https://blog.csdn.net/zhaojw_420/article/details/52439363

版权

前端专栏收录该内容

0 篇文章 1 订阅

订阅专栏

html实现input框前追加图片
这里写图片描述
html页面代码为：

<div id="inputname">
  <i class="icon-user"></i>
  <input id="login_name"  name="email" style="padding-left: 30px;"  type="text" />
</div>
<div id="inputpass">
  <i class="icon-pass"></i>
  <input id="login_pass" name="passwd" style="padding-left: 30px;"  type="password" />
</div>

css代码为：

.icon-user{
      position: absolute;left: 0；z-index:5;margin-top: 8px;
      background-image: url(../css/pblogin/zhanghao.png); /*引入图片图片*/
      background-repeat: no-repeat; /*设置图片不重复*/
      background-position: 0px 0px; /*图片显示的位置*/
      width: 40px; /*设置图片显示的宽*/
      height: 35px; /*图片显示的高*/
}
.icon-pass{
      position: absolute;left: 0；z-index:5;margin-top: 8px;
      background-image: url(../css/pblogin/mima.png); /*引入图片图片*/
      background-repeat: no-repeat; /*设置图片不重复*/
      background-position: 0px 0px; /*图片显示的位置*/
      width: 40px; /*设置图片显示的宽*/
      height: 35px; /*图片显示的高*/
}