javascript - 如何在滚动区域的末尾使文本渐变阴影？

Question

我有一个水平滚动的区域。如您所见，可滚动内容顶部区域的左侧和右侧都有白色到透明的渐变矩形。我想要做的是让可滚动项目在靠近左端或右端时消失 - 现在它看起来或多或少可以接受。问题在于滚动容器的半透明背景，您可以在下面看到黄色地图。如果有一个不透明的背景，这将很容易实现。但是因为我让它是半透明的，所以我需要一个解决方案，如何让这些矩形以某种方式适应它周围的颜色，这样白色矩形就不会那么突出。

有没有一种正确优雅的方式来做到这一点而没有太多的黑客攻击？

Answer 1

有一个非标准的 CSS 属性（目前在 Chrome 和 Safari 中有效，称为-webkit-background-clip( demo )，其工作方式如下：

.masked{
  background: url(/bgclip/img/paint.png) repeat, white;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

我可以使用页面表明它具有广泛的支持，但您想要的值text似乎特定于 web kit。