Question

我在网站上遇到文字渐变问题。最好以一个例子来展示：

我使用文字渐变来创建渐变外观：

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>

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

1 个答案:

demo