css - 文本渐变和不同长度文本的问题

Question

我的网站上的文本渐变有些问题。最好用一个例子来展示：

http://jsfiddle.net/QTANr/1/

我正在使用文本渐变来创建渐变外观：

background: -webkit-linear-gradient(top, #000, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

在示例中，第一个框按应有的方式显示，因为文本的长度正确。第二个框有一个较短的文本板，它也应该显示。然而，第三个框中有很多文本，因此渐变不会应用于它。

我确保我只加载一定数量的字符，但由于文章中段落的位置未知，甚至字体大小不同，我无法从每篇文章中获得准确的文本数量，所以我正在抓取更多比我需要的并用溢出隐藏其余部分。

我必须使用文本渐变而不是背景渐变，因为盒子有一个透明的背景，上面显示了纹理，所以不幸的是我不能只将背景渐变为白色。

我尝试将文本渐变移动到 .post div 中，但后来我失去了作者姓名中文本的颜色；这一切都显示为黑色。

我怎样才能解决这个问题？

Answer 1

可能有更好的方法，但您可以使用渐变叠加。

div.post-info {
    position: relative;
}
.overlay {
    background: -webkit-linear-gradient(top, 
                                        rgba(255, 255, 255, 0), 
                                        rgba(255, 255, 255, 1) 40%, 
                                        rgba(255, 255, 255, 1));
    height: 200px;
    width: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
}

然后将覆盖 div 放入其中。

        <div class="post-info">
            <div class="overlay"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan mauris at metus posuere, vitae laoreet dolor sagittis. Nulla rhoncus, metus sit amet sodales scelerisque, ipsum leo egestas metus, in viverra lectus quam et metus. Mauris leo nulla, pharetra vel ultricies suscipit, porttitor non nibh. Integer quis quam tellus. Donec bibendum purus venenatis accumsan sagittis. Phasellus bibendum sem non orci accumsan suscipit non</p>
        </div>

演示