css - div末尾逐渐透明的文本

Question

我在这里的描述文本末尾看到了一个简洁的效果，文本的最后一行逐渐变得越来越透明，我很好奇它是如何完成的。

已经就这个主题进行了讨论，但我没有让 jsFiddle 按预期工作，而且许多其他回复似乎错过了 OP 的意图。

可行吗？如果是这样，没有供应商前缀是否可行？

score 1 · Accepted Answer

他们正在使用 CSS3 背景渐变，但您可以使用图像实现相同的效果。只需一个小png图像就可以解决您的问题。

score 1 · Accepted Answer

是的，您可以这样做，并且无需供应商前缀：将 adiv放在文本区域上。在这里div class="fadeout">，您放置一个渐变为白色的图像，在该图像的顶部是透明的，在底部只有白色（或页面的背景色）。底层文本区域中的文本看起来像是淡出的。

图像可以用 CSS-Gradient 替换：

.fadeout {
    background-image: 
      -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 20%, #FFFFFF 95%);
}

但这有供应商特定的前缀。

2 回答 2