Question

我尝试使用此代码同时使2个渐变相互重叠...

    #grad1 {
       height: 3px;
       background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
       background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
       background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
       background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    }
    #grad2 {
        height: 3px;
        background: -webkit-linear-gradient(left, #2184E2 , #AE1937);
        background: -o-linear-gradient(right, #2184E2, #AE1937);
        background: -moz-linear-gradient(right, #2184E2, #AE1937);
        background: linear-gradient(to right, #2184E2 , #AE1937);
    }

但它并不像我想要的那样相互重叠。

如何让＃grad1重叠#grag2，以便它们同时可见？

Answer 1

使用这种方式：

#grad1 {
  position: absolute;
  z-index: 1;
}

#grad2 {
  position: absolute;
  z-index: 2;
}

这样它只会重叠两个内容，使#grad2保持在#grad1之上。请确保您有另一个<div>，它是两者的父母position: relative。

<强>段

#grad1 {
  height: 3px;
  background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
#grad2 {
  height: 3px;
  background: -webkit-linear-gradient(left, #2184E2 , #AE1937);
  background: -o-linear-gradient(right, #2184E2, #AE1937);
  background: -moz-linear-gradient(right, #2184E2, #AE1937);
  background: linear-gradient(to right, #2184E2 , #AE1937);
}

#grad1 {
  position: absolute;
  z-index: 1;
}

#grad2 {
  position: absolute;
  z-index: 2;
}

.parent {position: relative; width: 50px; height: 50px;}
.parent > div {width: 50px;}

<div class="parent">
  <div id="grad1"></div>
  <div id="grad2"></div>
</div>

如何一次显示2个渐变？

1 个答案: