CSS：如何使文本从顶部和底部淡入淡出？

Question

我需要从顶部和底部淡出段落。但我只能从任一侧褪色。

\n

HTML：

\n

<p className="bottom-overflow-fade">\n  {content}\n</p>\n

\n

CSS：

\n

.bottom-overflow-fade {\n  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);\n  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);\n}\n\n.top-overflow-fade {\n  mask-image: linear-gradient(to top, black 80%, transparent 100%);\n  -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);\n}\n

\n

当前结果：

\n

\n

问题：

\n

如果我将这两个类名添加到段落中，淡入淡出将\xe2\x80\x99t 工作。如果我使用其中任何一个，那么顶部和底部的淡入淡出效果都很完美。是否可以将这两个 CSS 属性合并为一个，以便顶部和底部淡入淡出都起作用？

\n

注意：我不是在谈论任何动画。

\n

Answer 1

这是因为 CSS 的本质。如果您为同一财产申请两份声明，则只有一份声明负责！您可以创建具有不同线性渐变的单个类，该渐变开始透明变为黑色，然后结束透明，例如：

.top-bottom-overflow-fade {
  mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}

编辑

评论中提出的问题询问传递给线性梯度函数的值是什么：

1. 第一个参数是控制渐变方向的可选值。这可以使用一些关键字（例如to left top或to right）或旋转角度来描述。在 CSS 中，用于表示角度的单位可以采用deg（度）、turn（rad弧度）或grad（梯度）的形式。如果没有提供，默认方向是从上到下。请注意，我没有包含此内容，因此使用默认方向。
2. 其余参数是颜色列表以及颜色应开始和停止的可选值（称为颜色停止）。您可以根据需要使用任意多个色标。色标越多，每个色带就会变得越窄。没有任何“提示”或开始点和停止点的颜色停止列表将从一种颜色平滑过渡到下一种颜色，因为它将统一应用颜色开始点和停止点。如果您希望从一种颜色突然过渡到下一种颜色，则可以将第一种颜色的停止百分比设置为与下一种颜色的起始百分比相同的值。一些聪明且有艺术天赋的人利用 CSS 渐变属性堆叠多个图像的能力（渐变被视为背景图像而不是背景颜色），制作出令人惊叹的图案！background-image