Question

我有一个主要的div。在div里面，我有一个图像。我想在图像顶部的特定位置放置一个文本字段和一个按钮。它们都应该是透明的，以便用户感觉他们正在写在图像之上。

我的问题是这是如何最好的解决方案？是否使用CSS制作包含这两个div的div并将div放在正确的位置？或者是否有某种我可以使用的JavaScript？

此外，当我将鼠标悬停在按钮上时，我希望它用新图像替换图像。

我对它的外观做了Fiddle。这是来自那个小提琴的代码。

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;
}

Answer 1

这是我的解决方案，但请阅读@Chandranshu建议：

<强> HTML

<form>
    <div class="iphone">
        <div>
            <input type="text"/>
            <button></button>
        </div>
    </div>
</form>

<强> CSS

html {
    font-family: Arial, Helvetica, sans-serif;
}

div.iphone {
    position: relative;
    width: 317px;
    height: 595px;
    background: transparent url(http://s24.postimg.org/4vpzx68yt/test1.png) no-repeat 0 0;
}

div.iphone div {
    position: absolute;
    bottom: 122px;
    left: 71px;
}

div.iphone div > * {
    display: block;
    float: left;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    appearance: none;
    border-radius: 10px;
    outline: 0;
}

div.iphone input {
    line-height: 10px;
    width: 148px;
    height: 10px;
    padding: 5px;
    background: #fff;
}

div.iphone button {
    margin-left: 5px;
    width: 50px;
    height: 20px;
    cursor: pointer;
}

http://jsfiddle.net/coma/jXCS3/

我刚刚更新了我的jsfiddle以向您展示在容器上使用position relative和在子容器上使用absolute的好处（尝试调整textarea的大小）：

http://jsfiddle.net/coma/jXCS3/4/

Answer 2

我已将您的jsfiddle更新为“几乎”解决您的问题。这是更新的代码：

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" placeholder="Skriv in aktiveringskoden"/>
    <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;
    top:451px;
    width:216px;
    height:26px;
    z-index:2;
}
.aktiverabut {
    color: #FFF;
    background: transparent;
    border: 0;
    outline: none;
    position: absolute;
    left: 233px;
}
.formcodeaktiv, .formcodeaktiv:focus, .formcodeaktiv:active {
    left: 72px;
    position: absolute;
    padding-left: 5px;
    border: 0;
    outline: none;
    width: 153px;
    color: black;
    background-color: transparent;
}

重大变化：

你的绝对位置不对。只需更正将输入定位在图像顶部的位置。
然后你需要添加border：0和outline：none来摆脱它们的边界。
确保您还包括：focus和：active pseudoclasses，否则当用户开始输入时边框将会显示。
将样式从HTML移动到CSS文件。内联样式很烦人。
在文本字段中添加占位符属性。这样，当用户开始输入时，占位符文本将消失。如果您将文本保留在图像中，则用户键入的文本将显示在灰色提示文本的顶部。

既然您已经询问了解决此问题的最佳方法，那么我也应该回答这个问题。如果您可以编辑图像，只需将文本字段和按钮所在的区域白化，然后使用纯CSS解决方案根据需要渲染它们。您可以使用border-radius获取圆角，并使用图像精灵来处理按钮的不同状态。

如何在图片顶部很好地对齐表单输入？

2 个答案: