Question

我已经看到了将图像放在文本区域的问题，但我有一个稍微不同的问题：我想在图像上叠加textarea 。我尝试过使用z-index样式属性，但是我用fquery fade的图像总是位于文本区域的顶部。

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

在图像上显示文本区域

3 个答案:

如何运作