如何在某些文本下面顯示線性漸變？

在我的頁面中，我有幾個部分。我想在當前活動部分顯示線性漸變。現在如何在某些文本下面顯示線性漸變？

<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