2

我有一个主 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;
}
4

2 回答 2

2

这是我的解决方案，但请阅读@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，向您展示了在容器上使用相对位置并在其子级上使用绝对位置的好处（尝试调整 textarea 的大小）：

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

于 2013-11-06T21:58:48.917 回答
1

我已更新您的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;
}

重大变化：

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

由于您还询问了解决此问题的最佳方法，所以让我也回答一下。如果您可以编辑图像，只需将文本字段和按钮所在的区域变白，然后使用纯 CSS 解决方案根据需要呈现它们。您可以使用边框半径获得圆角，并为按钮的不同状态使用图像精灵。

于 2013-11-06T21:31:37.620 回答