如何在某些文本下面显示线性渐变？

在我的页面中，我有几个部分。我想在当前活动部分显示线性渐变。现在如何在某些文本下面显示线性渐变？

<div class='main_wrapper'> 
    <div class='header'> 
     Product 
    </div> 

    <div class='helper'> 
     Abc dda 
    </div> 
    <textarea>asdadadad</textarea> 
    <div class='active-section'></div> 
    </div>

，如果我有

.active-section, 
.active-section2{ 
    border-top: 1px solid #d8d8d8; 
    margin-left: 0px; 

    width:100%; 
    position: absolute; 
    top: 2px; 
    left: 0; 
    height: 107px; 

    background: rgb(216,216,216); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(216,216,216,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 

}

那么这实际上是在文本，这是不必要的。

以下也不是预期的。这是透明的，但这会使文字看起来褪色。

.active-section2{ 
    background: -moz-linear-gradient(top, rgba(216,216,216,0.51) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,0.51)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(216,216,216,0.51) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 

}

检查此琴：http://jsbin.com/ayimuk/2

我只是想在活跃部分线性渐变，渐变的高度为100像素（可以说）。我尝试使用z-index，也没有奏效。

来源

2013-05-09 Rakesh Juyal

u能画出图像ü需要什么 – mastermind 2013-05-09 09:48:32

@Adrift敬礼！这就是我想要的。你可以发表这个答案，我会接受它。谢谢 – 2013-05-09 10:03:57

@mastermind参见Adrift的解决方案。这就是我需要的。 – 2013-05-09 10:05:06