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

}

检查这个小提琴：http://jsbin.com/ayimuk/2

我只想在活动部分中使用线性渐变，渐变的高度将为100px（让我们说）。我尝试使用z-index，但也没用。

Answer 1

您使用了z-index，但忘记了如果元素的默认值position不是默认值static，则无法使用此属性。添加相对定位会使文本高于渐变。

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

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

1 个答案: