如何添加背景文本到textarea標籤？

你知道你可以使用文本區域添加圖像作爲背景圖像：如何添加背景文本到textarea標籤？

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

怎樣纔可以有文字（不形象，也不是文本的圖像）作爲textarea的背景？

它不是包含在textarea中的文本。這是一些背後的文字。用戶可以在textarea中寫入，並且就像背景圖片一樣，可以看到背後的背景文字。

首選CSS2，CSS3和JS都可以。

來源

2013-05-14 Cedric

不要以爲你可以後臺文本添加到任何元素。 –

感謝那些建議使用textarea的佔位符屬性的人。這不是問題的答案，但知道並使用它是一個很酷的技巧！（你可以查看它：http：//www.w3schools.com/tags/tryit.asp？filename = tryhtml5_textarea_placeholder） – Cedric

@Cedrice'placeholder'和'background-image'與你無關也是你提到的_see背景文字behind_在OP。當textarea專注時，'placeholder'將會關閉。 –

有一種強力方法：

<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

來源

2013-05-14 19:08:54

如何佔位符屬性：

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

來源

2013-05-14 19:03:34 Mindbreaker

IMO您可以使用佔位符屬性並使用JS工具填寫不支持的瀏覽器。如果你在你的項目中使用jQuery，你可能會使用像http://andrew-jones.com/jquery-placeholder-plugin/ – skeep

@Jason這是不正確的：http://caniuse.com/#feat=input -placeholder – Mindbreaker

是的，有很多像這樣的佔位符polyfills：https：//github.com/ginader/HTML5-placeholder-polyfill。 @Mindbreaker，不知道什麼是不正確的，caniuse驗證它在當前版本的IE中根本不被支持。 – Jason

你可以用一個div和定位DEMO http://jsfiddle.net/kevinPHPkevin/UXgJD/1/

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

來源

2013-05-14 19:05:11 Vector

只有我能想到這樣做是手動放置一些文本的方式做到這一點那裏有一個固定的位置。

JS-fiddle

HTML：

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

CSS的股利（背景文本）：

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

來源

2013-05-14 19:08:30 sbatson5

如何添加背景文本到textarea標籤？

回答

相關問題