如何将图像标签放在文本框的顶部

Question

使用以下css

 .prenom { width: 200px;    background-image: url('/Images/Prénom.jpg') ;background-repeat: no-repeat;display: block;background-position: left top;}

我明白了

我想要这个

背景图片位于文本框顶部和外部

我是否需要为我的图片创建不同的对象，或者我可以设置css属性以在文本框的顶部填充

谢谢

Answer 1

我建议将它附加到HTML中的不同对象。优点是您可以在浏览器之间获得一致的体验，从而减少问题。

Answer 2

你在找这样的东西吗？

HTML

<div>
    <form>
        <label for="text1">Random Text</label>
        <input type="text" name="text1" />   
    </form>
</div>

CSS

label{
    display:block;
}

http://jsfiddle.net/Xero1212/u56qF/5/

Answer 3

试试这个，

.prenom { width: 200px;
display: block;
position:relative
}
.prenom:after{
content:url('/Images/Prénom.jpg');
display:block;
position:relative;
top: -30px;
left:0;
}

-30px可以更改以调整图像

Answer 4

你可以尝试

.prenom { 
   width: 200px;    
   display: block;
   background:url('/Images/Prénom.jpg') 0 -10px no-repeat;
 }

可以修改值-10px以满足您的要求。