在透明图像后面制作html输入元素选择表[关闭]

Posted 2023-03-06

【中文标题】在透明图像后面制作html输入元素选择表[关闭]

【英文标题】：Make html input element select-able behind a trasparent image [closed]

【发布时间】：2012-11-26 14:37:49

【问题描述】：

我希望透明图像后面的元素可以选择，请帮助我！

【问题讨论】：

这个问题不难，我可以这样做吗？

如何选择？使用 CSS 选择器，还是使用光标？如果是后者，只需否定图片的z-index

不，这不是一个难题，但是在 SO，您至少应该展示您的尝试，以便我们帮助您找到问题所在。这不是一个你来请别人为你工作的网站。

光标显然是这样的 - jsfiddle.net/marcellokabora/h2QkR

请停止乞求和抱怨......这不会更快或更好地帮助你。

【参考方案1】：

只需将 z-index 值更改为更大的值，例如“99”。它在页面上仍然具有完全相同的外观，但现在可以点击，并且可以接受用户输入。

或者，您不必为这样的布局使用绝对定位，您可以只使用左边距和上边距定位输入并将其与它的容器元素（和相应的背景图像）对齐。

HTML

<header>
    <input id="input" type="text" name="text" />
</header>

CSS

header 
     background:url('your_url') no-repeat;
     display:block;
     width:960px; /* for example... */
     height:200px; /* for example... */

#input 
    margin-left:100px; /* for example... */
    margin-top:80px; /* for example... */

【参考方案2】：

只需从您设置为 -1 的输入元素中删除 z-index。