具有灵活背景图像的文本区域，可根据文本输入调整大小答案

【问题标题】：Textarea with flexible background image that resizes with text input具有灵活背景图像的文本区域，可根据文本输入调整大小
【发布时间】：2011-12-20 05:43:26
【问题描述】：

我有一个textarea，它的背景是一个手绘框。我希望背景图像的height 与其中的文本一起拉伸。因此，当文本输入超出textarea 的height/width 时，图像（连同文本框本身）将调整大小以匹配文本的整个高度。我认为这可以通过为textarea CSS 添加min-height: 200px/max-height:100% 来解决，但不知道如何正确实现它。

我使用的代码是：

    textarea{ 
        background: #FFF url(box.png) no-repeat 0px 0px;
        background-attachment:fixed;
        width: 605px;
        height: 200px;
        line-height:20px;
        padding:30px;
        text-indent:3px;
        margin:0;
        border: none;
    }

<textarea type="text" class="textbox" size="14"></textarea>

编辑：澄清一下，这不是我们将使用的实际图像，设计师正在制作一个更好的版本 - 只是我在油漆中拼凑在一起的一个。

【问题讨论】：

标签： html css textarea

【解决方案1】：

<div> 与 contenteditable 和 display: inline-block; 可以在没有代码的情况下像 <textarea> 一样工作。

演示：http://jsfiddle.net/ThinkingStiff/sau9r/

HTML：

<div contenteditable>expaning textarea</div>

CSS：

div {
    display: inline-block;
    background-image: url(http://i.stack.imgur.com/EiR9T.png);
    background-size: 100% 100%;
    background-repeat:no-repeat;
    min-height: 100px;
    min-width: 200px;
    outline: 0;
    padding: 30px 30px 40px 20px;
}

【讨论】：

【解决方案2】：

文本区域通常不会调整大小以匹配输入文本的高度，因此您需要使用 js。有关执行此操作的方法，请参阅 autosizing-textarea 和 implementing-a-resizable-textarea。也有可用的 jquery 插件。

拉伸背景会特别困难，因为它是手绘的。

我建议创建带有顶部边框背景图像的<div>，然后创建带有左右两侧背景图像可以垂直重复的<textarea>，然后添加<div>带有底部边框背景图片。

【讨论】：