html background系列实现登录和注册小图标

<!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>

View Code

                background-image: url(2.png);默认div大小,图片重复访问
               background-repeat：no-repeat 是否重复
               background-position-x   调整图片滑动X轴
               background-position-y   调整图片滑动Y轴
               background-position：10px 10px
               background

样式图：