0

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

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

}

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

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

4

1 回答 1

2

您使用但忘记了如果没有一个元素也具有除默认值以外的值 - z-index，则不能使用此属性。添加相对定位将使文本高于渐变。positionstatic

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

于 2013-05-09T13:10:06.783 回答