淡出文字溢出

时间:2013-05-27 04:45:50

标签: html css

我需要淡化从div中溢出的文本, 我想知道如何通过简单地使用渐变来实现它,但在这种情况下,渐变将在我的背景图像上可见。

我需要淡化文字但仍能看到背景图片。

谢谢你。 法比奥

1 个答案:

答案 0 :(得分:0)

这是一个想法:

使最后三行的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但它很简单:) 并将在每个现代浏览器中工作

编辑: 我很蠢,你甚至可以使用rgba作为文本颜色,而不是使用文本阴影技巧。 而且不需要JS,你可以用nth-child选择最后一行。 只有当行数总是在变化时,才需要JS。

编辑2: 我们不能使用nth-child作为行。只有::第一行。

所以没有javascript似乎不可能。