2

我需要从顶部和底部淡化段落。但我只能从任何一方消失。

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 属性合二为一，以便顶部和底部淡入淡出都起作用？

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

4

2 回答 2

3

这是因为 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 topor to right）或旋转角度来描述。在 CSS 中，用于表示角度的单位可以是deg（度）、、turn（rad弧度）或grad（梯度）的形式。如果未提供，则默认方向是从上到下。请注意，我没有包含此内容，因此使用了默认方向。
  2. 剩下的参数是颜色列表和颜色应该在哪里开始和停止的可选值，称为颜色停止。您可以根据需要使用尽可能多的色标。您拥有的色标越多，每个“色带”就会变得越窄。没有任何“提示”或起点和终点的颜色停止列表将从一种颜色平滑过渡到另一种颜色，因为它将统一应用颜色起点和终点。如果您想从一种颜色突然过渡到另一种颜色，您可以将第一种颜色的停止百分比设置为与下一种颜色的起始百分比相同的值。一些聪明和艺术的人利用 CSS 渐变制作出令人惊叹的图案background-image属性堆叠多个图像的能力（渐变被视为背景图像而不是背景颜色）！
于 2020-07-01T14:13:23.953 回答
0

如果您想拥有顶部、底部和两者的组合，这是一个通用解决方案。

诀窍是使用 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>

于 2020-07-01T20:10:30.780 回答