Css 线性渐变，使文本；“消失”；

我需要一些帮助。 有几个容器中有文本。显然有很多文本，所以必须有滚动条。但我不希望文本看起来像是被剪切的，我想“模糊”单个容器的底部

结果如下：

嗯，看起来。。。在我看来相当糟糕。容器的底部应该几乎看不见，但我可以清楚地看到它。我使用了

：after

和

display:block

来实现这一效果，因此我无法选择该伪元素下的文本

还有一个问题，当我向下滚动时，梯度会停留在一个地方。你能帮我解决这个问题吗？还有，也许你有什么办法让这个效果看起来更好

我想“模糊”单个容器的底部

Blur是CSS过滤器（

filter:Blur（1）

），您不能在这里将其与

after::

伪元素一起使用，因为该元素的内容为空

我使用了：after和display:block来产生这种效果，因此我无法选择该伪元素下的文本

这是一个很好的通用解决方案。要使

后面的文本可点击：

可以添加

指针事件：无到
之后：：

还有一个问题，当我向下滚动时，梯度会停留在一个地方

after:：
应该放在
.main
中，在
.main
中，你应该有另一个带有滚动条的容器。
更新：第一个片段在Chrome上似乎有问题，但在Firefox上可以正常工作

您可以尝试使用渐变为文本上色，如下所示：


正文{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
保证金：0；
高度：100vh；
}
.集装箱{
填充：20px；
边框：1px纯黑；
}
.main:不是（：第一个孩子）{
边缘顶部：20px；
}
梅因先生{
宽度：200px；
高度：200px；
盒影：0px 0px 20px 1px rgba（0,0,0,0.75）；
溢出：自动；
文本对齐：居中；
背景：线性梯度（#000 calc（100%-50px），白色）；
-webkit背景剪辑：文本；
背景剪辑：文本；
颜色：透明；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。按摩前庭，非按摩前庭，发酵通心粉。Lorem ipsum dolor sit amet，是一位杰出的献身者。弗斯在埃拉特·利伯罗。同侧海棠、龙须菜、虎尾威尼斯海棠。Donec venenatis，luctus ullamcorper的猫科动物，leo nibh scelerisque orci，以及Pellentsque quam libero vel enim。佩伦茨克一个毛里斯尼布。休止符eu laoreet nisi。佩伦特斯克比本杜姆·乌兰科佩尔·伊库利斯（Pellentesque bibendum ullamcorper iaculis）。无托尔托尔奥迪奥，交通工具ac直径非，阿利奎特三色扫描电镜

Lorem ipsum dolor sit amet，是一位杰出的献身者。按摩前庭，非按摩前庭，发酵通心粉。Lorem ipsum dolor sit amet，是一位杰出的献身者。弗斯在埃拉特·利伯罗。同侧海棠、龙须菜、虎尾威尼斯海棠。Donec venenatis，luctus ullamcorper的猫科动物，leo nibh scelerisque orci，以及Pellentsque quam libero vel enim。佩伦茨克一个毛里斯尼布。休止符eu laoreet nisi。佩伦特斯克比本杜姆·乌兰科佩尔·伊库利斯（Pellentesque bibendum ullamcorper iaculis）。无托尔托尔奥迪奥，交通工具ac直径非，阿利奎特三色扫描电镜

也许你在寻找这种效果：你是对的，它真的很有帮助。也谢谢你的回答，它；太好了！