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

Question

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

我的下一个想法是在表格上应用一个 div，它会模仿页面的背景并(最初)100% 透明，但随着它应用模仿的背景，逐渐降低透明度，从而有效地隐藏越来越多的行。但是我的背景不是恒定的颜色，它是从颜色 A 到颜色 B 的渐变，我在模仿该背景时遇到了很大的问题，但没有以完全相同的方式创建它(页面的高度 100%，从颜色 A 到颜色的渐变)颜色 B)。如果我能做到这一点，但同时又说，嘿 div 与我的背景颜色完全一样，我希望你最初是 100% 透明的，这样实际背景就会出现在 div 的顶部，但会出现在你 body 的底部 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/