相关疑难解决方法(0)

我有一个div与背景颜色渐变绝对定位.我有这个文本,当我向上滚动文本时,我想要更改为白色.

我正在使用'mix-blend-mode'属性来实现此目的,但我找不到任何将文本从黑色变为白色的设置.有没有人以前做过这个或者能想到我能做的伎俩？

.bg-container {
  position: fixed;
  top: -30px;
  left: 0;
  width: 100px;
  height: 100px;
}

.gradient-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 200px;
  background-image: linear-gradient(to bottom, rgb(100, 182, 240) 15%, rgb(81, 155, 244));
  transform: skewY(-15deg);
}

.scroll-content {
  position: absolute;
  top: 50px;
}

.scroll-content p {
  color: #000;
  mix-blend-mode: overlay;
}

/*hack for iOS*/
.scroll-content p:after{
    content: '\200c'
}

<div class="bg-container">
  <div class="gradient-background">
    &nbsp;
  </div>
</div>
<div class="scroll-content">
  <p> abc 1 </p>
  <p> abc 2 </p> …

我正在尝试使用以下 CSS 代码在 webkit 浏览器中制作渐变文本：

.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}

它在 Chrome 中完美运行，但在 Safari（8 和 9）中它不会呈现渐变文本，除非您通过鼠标单击+拖动来选择它。

HTML如下：

<p class = "text">Hello world.</p>

花了2个晚上。发现了很多使用这种方法的建议，但有几个问题与我的类似，根本没有解决方案。如果有人愿意帮忙，将不胜感激。

重要更新：

我发现，这段代码在应用于单个<p>元素时效果很好，但是当应用于 div 包装器到单个或多个<p>元素时，无法在 Safari 中呈现（而不是在 chrome 中），如下所示：

<div class = "text">    
   <p>First line.</p>
   <p>Second, way longeeeeeeer line. </p>
   <p>Third line, just to see gradient span over multiple lines. </p>
</div>

任何想法为什么会出现这种情况或如何克服这种情况？

我有一个带有几个 li 的 ul。

我在 ul 上使用这个 id。

#list {
margin-right: auto;
margin-left: auto;
width:500px;
color:black;
background: -webkit-linear-gradient(#000, #909090);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

ul 的内容在 Chrome 中接受渐变处理就好了，但在 Safari 中则不然。在 Safari 中，所有的 li 都是“隐形的”。如果我检查然后禁用“-webkit-text-fill-color：transparent;”，文本将变得可见，尽管没有渐变（显然）。

想法？

这是 JSfiddle：https ://jsfiddle.net/s96bzcua/

亲切的问候，