html - CSS:如何从顶部和底部淡化文本？

Question

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

HTML:

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

CSS:

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

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

当前结果:

问题:

如果我将这两个类名都添加到段落中，淡入淡出将不起作用。如果我使用它们中的任何一个，那么淡入淡出对于顶部和底部都非常有效。是否可以将这两个 CSS 属性合并为一个，以便顶部和底部淡入淡出都有效？

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

Answer 1

这是因为 CSS 的性质。如果您为同一属性(property)申请两次申报，则只有一个会主持!您可以创建一个具有不同线性渐变的类，该渐变从透明开始变为黑色，然后以透明结束，例如:

.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%);
}

编辑

评论中提出的问题询问传递给 linear-gradient function 的值是什么:

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