html - CSS:如何从顶部和底部淡化文本?
问题描述
我需要从顶部和底部淡化段落。但我只能从任何一方消失。
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 属性合二为一,以便顶部和底部淡入淡出都起作用?
注意:我不是在谈论任何动画。
解决方案
这是因为 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%);
}
编辑
评论中提出的问题询问传递给线性梯度函数的值是什么:
- 第一个参数是控制渐变方向的可选值。这可以使用一些关键字(例如
to left top
orto right
)或旋转角度来描述。在 CSS 中,用于表示角度的单位可以是deg
(度)、、turn
(rad
弧度)或grad
(梯度)的形式。如果未提供,则默认方向是从上到下。请注意,我没有包含此内容,因此使用了默认方向。 - 剩下的参数是颜色列表和颜色应该在哪里开始和停止的可选值,称为颜色停止。您可以根据需要使用尽可能多的色标。您拥有的色标越多,每个“色带”就会变得越窄。没有任何“提示”或起点和终点的颜色停止列表将从一种颜色平滑过渡到另一种颜色,因为它将统一应用颜色起点和终点。如果您想从一种颜色突然过渡到另一种颜色,您可以将第一种颜色的停止百分比设置为与下一种颜色的起始百分比相同的值。一些聪明和艺术的人利用 CSS 渐变制作出令人惊叹的图案
background-image
属性堆叠多个图像的能力(渐变被视为背景图像而不是背景颜色)!
推荐阅读
- docker - docker run 的挂载选项(类型、源、目标)的含义是什么?
- obiee - 我们如何计算数据透视表中的垂直总计?
- java - 将字符串与资源中的字符串值进行比较
- php - 如何在 Wordpress 产品标题中隐藏 HTML
- java - 阻止 Android DownloadManager 为受限应用下载
- php - 文本字段只在 php 中显示我的默认用户名和密码
- angular - 如何在管道过程中转换 Observable 结果
- android - 我在 Android 中编写了一个代码来将一些数据发布到 DRF(Django REST 框架)中。服务器给出错误消息 = 400 数据不为空
- php - PHP preg_match_all 问题
- javascript - 如何使用nodejs检查mongodb中是否存在登录凭据?