html - 淡化文本溢出

Question

我需要淡化从我的 div 溢出的文本，我会知道如何通过简单地使用渐变来做到这一点，但在这种情况下，渐变将在我的背景图像上可见。

我需要淡化文本，但仍然能够看到下面的背景图像。

谢谢你。法比奥

Answer 1

这是一个想法：

使最后三行的 css 文本透明：

color: transparent;

然后用文本阴影填充这些行。

text-shadow: 1px 1px 0 rgba(0,0,0,1)

然后你可以淡化第二行和最后一行的阴影

 text-shadow: 1px 1px 0 rgba(0,0,0,5)
 text-shadow: 1px 1px 0 rgba(0,0,0)

它需要一点 JS，但它很简单 :) 并且适用于每个现代浏览器z

编辑：我很愚蠢，您甚至可以将 rgba 用于文本颜色，而不是使用文本阴影技巧。并且不需要 JS，你可以选择带有 nth-child 的最后几行。仅当行数总是在变化时，您才需要 JS。

编辑 2：我们不能将 nth-child 用于行。只有::fist-line。

所以没有javascript似乎是不可能的。