我有一个主 div。在 div 里面,我有一个图像。我想在图像顶部的特定位置放置一个文本字段和一个按钮。它们都应该是透明的,以便用户感觉他们是在图像之上书写。
我的问题是如何最好地解决这个问题?是否制作一个包含这两个的 div 并使用 CSS 将 div 放置在正确的位置?还是有某种我可以使用的javascript?
另外,当我将鼠标悬停在按钮上时,我希望它用新图像替换图像。
我做了一个关于它的样子的小提琴。这是那个小提琴的代码。
HTML:
<div id="apDiv1"><img src="http://s24.postimg.org/4vpzx68yt/test1.png" width="317" height="595" />
<div id="apDiv2">
<form id="form1" name="form1" method="post" action="">
<label for="textfield"></label>
<input name="textfield" type="text" class="formcodeaktiv" id="textfield" style="width: 153px; color: black; background-color: transparent;" />
<input name="aktiverabut" type="submit" class="aktiverabut" id="aktiverabut" style="width: 1px; color: transparent; background-color: transparent; padding-left: 40px" value="aktiverabut" />
</form>
</div>
</div>
CSS:
#apDiv1 {
position:absolute;
left:79px;
top:22px;
width:354px;
height:655px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:147px;
top:472px;
width:216px;
height:26px;
z-index:2;
}
.aktiverabut {
color: #FFF;
background: transparent;
position: absolute;
left: 165px;
}
.formcodeaktiv {
left: 5px;
position: absolute;
}