Javascript CSS TextArea-为每条可见线提供不同的不透明度

所以我的html中有一个文本区域

<textarea id="log" class="txtbx-log" rows="10"></textarea>

现在我用它来实时显示正在运行的日志。我想第一行是100%不透明度，每进一步行的不透明度减少10

这可以用css/javascript实现吗

我知道可以创建多个div，并为每个div指定自己的不透明度，并在新日志消息出现时移动div/opacity的位置

但是，这将导致将日志消息从一个div移动到另一个div的丑陋代码。有没有更简单的方法

**编辑**

到目前为止，我只是像这样预先准备日志消息

on_chunk_uploaded: function() {
                        $('#log').prepend("<span>Chunk finished uploading</span>")
}

on_chunk_上传：函数（）{
$（'#log'）.prepend（“区块已完成上载”）
}

而不是这个

on_chunk_uploaded: function() {
    $('#log').prepend("<span>Chunk finished uploading</span>")
}

---

注意：编辑代码时，我意外地附加了不透明度。而不是+（PHP习惯）

不

元素中的文本不可能有不同的样式。我将通过使用

和

溢出：自动来模拟
行为。您可以用div或span代替吗？您需要一次显示多少行/用户应该能够滚动显示多少行？如果你能用div来做，那就很简单了。为什么不把新的div追加到底部，然后改变div的类呢，将更容易和更干净，或预先设置div，只使用css第n个子选择器，然后顶部div将始终是您想要的不透明度，我可以将其放入一个div。可以通过css添加类似不透明度渐变的内容吗？不过我不想放进多个div中..我也只想显示10行左右。不允许滚动。
on_chunk_uploaded: function() {
    $('#log').prepend("<span>Chunk finished uploading</span>")

    // If there are now more than 10 log lines, remove the last one
    if($('#log span').length > 10){
        $('#log span:last').remove();
    }

    // Remove all classes from the log lines
    $('#log span').removeClass();
    var opacity = 100;

    // Cycle through each line and add decrementing opacity classes
    $.each($('#log span'), function(index, $element){
        $element.addClass('opacity-' + opacity);
        opacity = opacity - 10;
    });
}

.opacity-100
{
   /* Opaque, doesn't need transparency... */
}
.opacity-90
{
   opacity: 0.9;
   filter:Alpha(opacity=90);
}
.opacity-80
{
   opacity: 0.8;
   filter:Alpha(opacity=80);
}
/* All the way down to 0... */