html - Displaying a text area on top of an image

Question

I've seen questions for putting an image in a text area, but I have a slightly different problem: I'd like to layer a textarea on top of an image. I've tried using the z-index style property but the image - which I fadeIn with jquery - always sits on top of the text area.

Answer 1

这是另一种可能更通用的方法。

创建一个带有两个子元素的块级容器，一个用于图像，一个用于文本区域：

<div class="textpanel">
    <img src="http://placekitten.com/300/300">
        <textarea>some text area text...</textarea>
</div>

应用以下CSS：

.textpanel {
    position: relative;
}
.textpanel img {
    display: block;
}
.textpanel textarea {
    position: absolute;
    top: 50px;
    left: 50px;
    height: 200px;
    width: 200px;
    background-color: rgba(255,255,255,0.5);
}

在父容器上设置position: relative，然后用于position: absolute将 放置在textarea图像上。

您可以使用rgba来控制不透明度，textarea也可以使用您选择的方法淡化图像。

您还可以尝试textarea根据需要设置边框样式。

演示小提琴：http: //jsfiddle.net/audetwebdesign/ygMZ6/

这是如何工作的

设置position: relative为.textpanel简单地为任何绝对定位的子元素设置一个引用。

设置position: absolute为textarea允许垂直和水平定位。创建了一个新的堆叠顺序，这就是为什么 textarea 出现在图像上的原因，图像仍然处于根级堆叠顺序。

在这种情况下，无需使用z-index更改任何元素的堆叠顺序。

Answer 2

你总是可以使用 CSS：

textarea{
  background:url('image.png');
}

或者

textarea{
  background-image:url('image.png');
}

Answer 3

我不知道您为什么要这样做，但这是我对此的想法..

设置文本区域的背景图片，然后使用简单的javascript或jquery实现背景褪色..

以下是一些关于文本区域背景图像的示例。 http://www.angelfire.com/nm/thehtmlsource/jazzup/text/textareabgimage.html