css - 如何在某些文本下方使用线性渐变？

Question

在我的页面中，我有几个部分。我想在当前事件部分显示线性渐变。

<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+ */

}

检查这个 fiddle :http://jsbin.com/ayimuk/2

我只想在事件部分有线性渐变，渐变的高度为 100px(假设)。我尝试使用 z-index 也没有用。

Answer 1

您使用了 z-index 但忘记了如果元素的 position 值不是默认值 - static< 则您不能使用此属性。添加相对定位将使文本位于渐变之上。

http://jsbin.com/itowes/1/edit