Extjs 4.2.2 - textarea中图像后面的可滚动文本

Question

我正在寻找高低，以实现在这个小提琴中所做的事情： http ： //jsfiddle.net/wNTe6/1/

我对Extjs -Textarea需要相同的效果。

（背景图像似乎已经过时，我使用了随机图像的图像URL）

我需要一个带有（背景？ - ）图像（中间/中间）和文本的teaxtarea。 文本应该是可滚动的，但必须在图像后面消失。

此刻，文本在我的背景图像上方滚动（这是可以理解的）。

我的textarea（Extjs）：

var txtField = Ext.create('Ext.form.field.TextArea', {
name: 'transitionTextArea',
width: transWidth,
height: 100,
border: false,
value: 'Transition Transition Transition Transition Transition Transition',
readOnly: true,
fieldCls: 'transition-style'
});

CSS-类：

.transition-style {
background-image: url('../images/icons/processControl/transition_160x32.png');
background-repeat: no-repeat;
text-align: center;
vertical-align: middle;
border: 0px;
padding-top: 30px;
}

谁能帮帮我吗？

任何帮助将非常感谢！

-nemesis-

Answer 1

好吧，我会试一试，但它不是很优雅。

这是小提琴 。

HTML中的变化。

<div class='imgdiv'>
    <img src='http://minionslovebananas.com/images/check-in-minion.jpg' width='100' height='120'>
    </div>

CSS的变化。

.imgdiv {
    margin: 40px auto;
    position: relative;
    top: 20%;
    left: 5%;
    border: 1px solid red;
    height: 120px;
    width: 100px;
        }

使外部div与可滚动div具有相同的高度，但稍微宽一点以不覆盖滚动条。 使其位置绝对。

将图像插入div并使div位置相对，您可以移动它。

我敢打赌有人可以给我们一个很好的ELEGANT解决方案。