Question

我有一个包含表格的可滚动div，我希望最后三个可见行变得越来越不清晰，慢慢淡入背景颜色。效果会像这样（http://css-tricks.com/examples/FadeOutBottom/），但有一个表格。最初，我选择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/

使表的最后三行越来越透明，融入背景

1 个答案: