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.
3 回答
这是另一种可能更通用的方法。
创建一个带有两个子元素的块级容器,一个用于图像,一个用于文本区域:
<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
更改任何元素的堆叠顺序。
你总是可以使用 CSS:
textarea{
background:url('image.png');
}
或者
textarea{
background-image:url('image.png');
}
我不知道您为什么要这样做,但这是我对此的想法..
设置文本区域的背景图片,然后使用简单的javascript或jquery实现背景褪色..
以下是一些关于文本区域背景图像的示例。 http://www.angelfire.com/nm/thehtmlsource/jazzup/text/textareabgimage.html