<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 38px; 400px;border: 1px solid red;position: relative"> <input type="text" style="height: 38px; 360px;padding-right: 40px"> <span style="position:absolute;background-image: url(test.png);height: 38px; 40px;display: inline-block ;right: -6px;top: 3px"></span> </div> <br style="height: 50px"/> <div style="height: 38px; 400px;border: 1px solid black;position: relative"> <input type="password" style="height: 38px; 360px;padding-right: 40px"> <span style="position: absolute;background-image: url(test.png);height: 38px; 40px;display: inline-block ;right: -6px;top: 3px;background-position-x: 72px"></span> </div> </body> </html>
background-image: url(2.png);默认div大小,图片重复访问
background-repeat：no-repeat 是否重复
background-position-x 调整图片滑动X轴
background-position-y 调整图片滑动Y轴
background-position：10px 10px
background
样式图：
