Question

我试图将图像背景上的段落的白色文本从白色淡化为透明。我有它在Chrome和Firefox中工作，但似乎无法在Safari中使用它。

在我的示例中，您会注意到文本不会显示在Safari中，但如果您突出显示该文本，则会显示该文本。 JSFiddle：https://jsfiddle.net/ngaffer/fgxbfoL4/5/

<section>
  <h3>Heading Three</h3>
  <div class="hideContent">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor sit amet gravida. Vivamus dictum, velit id bibendum sodales, diam mauris lobortis erat, eu blandit tellus neque vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor sit amet gravida. Vivamus dictum, velit id bibendum sodales, diam mauris lobortis erat, eu blandit tellus neque vitae lorem.</p>
  </div>
</section>

<style>
section {
  background-color: #111;
  display: block;
  overflow: hidden;
  color: #fff;
}

.hideContent {
  background: -webkit-linear-gradient(top, white 50%, rgba(255,255,255,0));
  background: -o-linear-gradient(top, white 50%, rgba(255,255,255,0));
  background: -moz-linear-gradient(top, white 50%, rgba(255,255,255,0));
  background: linear-gradient(top, white 50%, rgba(255,255,255,0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,0);
  height: 100px;
}
</style>

Image of the desired effect

Answer 1

我会避免这样做，因为支持仍然没有。但是......

我可以通过添加：

来达到预期的效果

-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0)1em, rgba(0, 0, 0, 1));

到文本课。

您可以通过在渐变中的第一种颜色之后增加/减少1em来控制渐变量

使用-webkit前缀测试并使用 Chrome 59 和 FF 54 - 。我没有 Safari ，但应该支持它。

这不会对IE or Edge起作用，但仍然...... 89％的支持并不是太糟糕。

＆＃13;
＆＃13;
section { background-color: #111; display: block; overflow: hidden; color: #fff; } .hideContent { -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0)1em, rgba(0, 0, 0, 1)); height: 100px; }
＆＃13;
<section> <h3>Heading Three</h3> <div class="hideContent"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor sit amet gravida. Vivamus dictum, velit id bibendum sodales, diam mauris lobortis erat, eu blandit tellus neque vitae lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis nec quam ac venenatis. Sed mollis aliquam nisl, ultricies facilisis justo viverra ac. Sed bibendum sagittis dolor sit amet gravida. Vivamus dictum, velit id bibendum sodales, diam mauris lobortis erat, eu blandit tellus neque vitae lorem.</p> </div> </section>
＆＃13;
＆＃13;
＆＃13;

应用于文本的透明线性渐变 - Safari中的错误

1 个答案: