Html 如何在html页面中将img src向下移动几个像素

How to move img src a few pixels down in html page

提问by user3816931

I found a way to make my own custom file upload control , by placing a fake control over it, and when i click the fake one , i am actually cliking the real control below.

我找到了一种方法来制作我自己的自定义文件上传控件，通过在它上面放置一个假控件，当我点击假控件时，我实际上是在点击下面的真实控件。

Anyways the image for the browse button is a little to the top.

无论如何，浏览按钮的图像有点顶部。

How can i lower it down a little?

我怎样才能降低一点？

Here is the js fiddle.

这是js小提琴。

JsFiddle

提琴手

Here is the html and css:

这是html和css：

    <div>
    <div class="fileinputs">
        <input type="file" class="file" />
        <div class="fakefile">
            <input />
            <img src="search.jpg" />
        </div>
    </div>
</div>

div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

回答by Bijan

I believe this is what you are looking for. jsFiddle

我相信这就是你正在寻找的。js小提琴

CSS

CSS

.moveimage
{
    position: relative;
    top: 3px;
}

Modified HTML

修改后的 HTML

<img class="moveimage" src="search.jpg" />