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

Question

我textarea的背景是​​一个手绘框。我希望height背景图片的内容与其中的文字一起伸展。因此，当输入的文本超出的height/ width时textarea，而不是看到滚动条，图像（以及文本框本身）的大小将调整为与文本的整个高度匹配。我认为可以通过为CSS 添加一个min-height: 200px/ max-height:100%来解决此问题，textarea但不知道如何正确实现。

我使用的代码是：

    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>

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

Answer 1

一个<div>with contenteditable和display: inline-block;can可以那样工作，而无需编写代码，并且可以像一样工作<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;
}