使表格的最后三行变得越来越透明，合并到背景中

Question

我有一个包含表格的可滚动 div，我希望最后三个可见行变得越来越不清晰，慢慢淡入背景颜色。效果会很像这样 (http://css-tricks.com/examples/FadeOutBottom/)，但有一张桌子。最初，我选择了 div 的最后三个可见行并对元素应用降低的不透明度。这行得通，但需要我在滚动发生时不断重新评估最后三行；混乱。

我的下一个想法是在表格上应用一个 div，该 div 将模拟页面背景并（最初）100% 透明，但随着应用模拟的背景逐渐降低透明度，有效地隐藏越来越多的行。但是我的背景不是恒定的颜色，它是从颜色 A 到颜色 B 的渐变，我在模仿该背景而不以完全相同的方式创建它时遇到了很大的问题（页面的高度 100%，从颜色 A 到渐变颜色 B)。如果我能做到这一点，但同时还要说，嘿，div 与我的背景的确切颜色，我希望你最初是 100% 透明的，所以实际的背景显示在 div 的顶部，但你身体的底部 x%我希望降低透明度级别，以便将您的颜色应用于底层表格，从而使文本变暗......嗯，那将是完美的。

我最初认为从透明到渐变 B 会完成我想要的，但没有骰子；回想起来，从颜色 A 到颜色 B 的颜色步骤与从透明到颜色 B 发生的颜色步骤不同也就不足为奇了。

现在正在做一个快速的 jFiddle，但我想我会把它放在那里，以防我忽略了一个简单的 CSS 组件或技术。

Answer 1

我建议研究 CSS 掩码。我整理了一个快速的 JSFiddle，它展示了掩码如何帮助您完成您正在寻找的内容：

即：

table {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0.00,  rgba(0,0,0,1)),
    color-stop(0.70,  rgba(0,0,0,1)),
    color-stop(1.00,  rgba(0,0,0,0)));
}

http://jsfiddle.net/Fp7dE/

您可以在此处了解有关口罩的更多信息： http://css-tricks.com/webkit-image-wipes/