jquery - 如何将背景文本添加到 textarea 标签？

Question

您知道可以使用以下命令将图像添加为 textarea 的背景图像：

textarea {
 background:#fff url(background.png) no-repeat center scroll; 
}

如何将文本（不是图像，也不是作为图像的文本）作为 textarea 的背景？

它不是 textarea 本身中包含的文本。后面是一些文字。用户可以在 textarea 中书写，就像背景图片一样，可以看到后面的背景文字。

CSS2 首选，CSS3 和 js 都可以。

Answer 1

占位符属性怎么样：

<textarea rows="5" cols="30" placeholder="enter optional message"></textarea>

Answer 2

有一种蛮力方法：

<div class="wallpapered">
    <div class="background">Some background text...</div>
    <textarea></textarea>
</div>

使用以下 CSS：

.wallpapered {
    width: 400px;
    height: 300px;
    position: relative;
    outline: 1px dashed blue;
}
.wallpapered textarea {
    width: inherit;
    height: inherit;
}
.wallpapered .background {
    position: absolute;
    top: 0;
    left: 0;
    color: gray;
}

小提琴

Answer 3

您可以使用 div 和定位 DEMO http://jsfiddle.net/kevinPHPkevin/UXgJD/1/

textarea {
    position:absolute;
    left:0;
    top:0;
    background: none;
}

Answer 4

我能想到的唯一方法是手动将一些文本放置在固定位置。

JS小提琴

HTML：

 <textarea>This is text</textarea>
 <div class="bgtext">
     this is background text
 </div>

div 的 CSS（背景文本）：

 .bgtext {
     position: fixed;
     top: 15px;
     left:10px;
     opacity: 0.4; /*optional*/
 }