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 的性质。如果您为同一个属性申请两个声明，则只有一个会主持！您可以创建一个 class 具有不同的线性渐变，开始透明变为黑色然后结束透明，例如：

.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 的值是什么：

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

Answer 2

如果您想要顶部、底部以及两者的组合，这里有一个通用的解决方案。

诀窍是使用 3 渐变创建蒙版，默认情况下一切都是白色（无透明度），然后使用 CSS 变量将白色更改为透明以创建渐变效果。

.fade {
  -webkit-mask:
    linear-gradient(to top   ,#fff,var(--t,#fff)) top    / 100% 30%,
    linear-gradient(#fff,#fff)                    center / 100% 40%,
    linear-gradient(to bottom,#fff,var(--b,#fff)) bottom / 100% 30%;
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(to top   ,#fff,var(--t,#fff)) top    / 100% 30%,
    linear-gradient(#fff,#fff)                    center / 100% 40%,
    linear-gradient(to bottom,#fff,var(--b,#fff)) bottom / 100% 30%;
  mask-repeat:no-repeat;
}

.top {
  --t:transparent;
}

.bottom {
  --b:transparent;
}

p {
 font-size:25px;
 max-width:180px;
 display:inline-block;
}

<p class="fade top">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod est quis nibh porta, ut vehicula magna imperdiet. Etiam euismod urna id venenatis pulvinar
</p>

<p class="fade bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod est quis nibh porta, ut vehicula magna imperdiet. Etiam euismod urna id venenatis pulvinar
</p>

<p class="fade top bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod est quis nibh porta, ut vehicula magna imperdiet. Etiam euismod urna id venenatis pulvinar
</p>

要理解这里的谜题是使用背景的相同代码：

.fade {
  background:
    linear-gradient(to top   ,red,var(--t,green))   top    / 100% 30%,
    linear-gradient(pink,pink)                      center / 100% 40%,
    linear-gradient(to bottom,blue,var(--b,purple)) bottom / 100% 30%;
  background-repeat:no-repeat;
}

.top {
  --t:transparent;
}

.bottom {
  --b:transparent;
}

p {
 font-size:25px;
 max-width:180px;
 display:inline-block;
}

<p class="fade top">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod est quis nibh porta, ut vehicula magna imperdiet. Etiam euismod urna id venenatis pulvinar
</p>

<p class="fade bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod est quis nibh porta, ut vehicula magna imperdiet. Etiam euismod urna id venenatis pulvinar
</p>

<p class="fade top bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod est quis nibh porta, ut vehicula magna imperdiet. Etiam euismod urna id venenatis pulvinar
</p>

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

CSS: How to fade text from top and bottom?

html

css

linear-gradients

css-mask