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;
}

Fiddle

Answer 3

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

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

Answer 4

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

JS-fiddle

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*/
 }

如何在textarea标签中添加背景文字？

4 个答案: