CSS:如何从顶部和底部淡入淡出文本? [英] CSS: How to fade text from top and bottom?

问题描述

我需要从顶部和底部开始淡入淡出段落.但是只能从任一侧褪色.

I need to fade paragraph from both top and bottom. But am able to fade from only either of the side.

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属性组合在一起，以便顶部和底部淡入淡出都可以使用?

If I add both these classnames to the paragraph, the fade won’t work. If I use either one of them, then the fade works perfectly either for top and bottom. Is it possible to combine both these CSS properties in one, so that both the top and bottom fade works?

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

Note: I am not talking about any animation.

推荐答案

这是因为CSS的特性.如果您对同一个属性应用两个声明，那么只有一个声明会主持！您可以创建一个具有不同线性渐变的类，该类从透明开始变为黑色，然后以透明结束，例如:

This is because of the nature of CSS. If you apply two declarations for the same property only one will preside! You can create a single class with a different linear gradient that starts transparent goes to black then ends transparent such as:

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

编辑

评论中提出的问题询问传递给线性梯度函数:

The question posed in the comments asks what the values are that are passed to the linear-gradient function:

1. 第一个参数是可选值，用于控制渐变的方向.可以使用一些关键字(例如，在左上或在右)或旋转角度来描述.在CSS中，用于表示角度的单位可以位于 deg (度)，转弯， rad (弧度)或 grad (坡度)的形式.如果未提供默认方向，则默认方向为从上到下.请注意，我没有包含此信息，因此使用默认方向.
2. 其余的参数是颜色列表以及可选的值，用于表示颜色应在何处开始和停止，称为颜色停止.您可以根据需要使用任意多个色标.色标越多，则每个色带"将变得越窄.没有任何提示"或起点和终点的颜色停止列表将具有从一种颜色到另一种颜色的平滑过渡，因为它将均匀地应用颜色的起点和终点.如果要从一种颜色突然过渡到另一种颜色，可以将第一种颜色的终止百分比设置为与另一种颜色的起始百分比相同的值.一些聪明而有艺术气息的人利用 background-background的优势，通过CSS渐变产生了令人惊叹的图案.image 属性可以堆叠多张图像(将渐变视为背景图像而不是背景颜色)！

1. The first argument is an optional value that controls the direction of the gradient. This can be described using some keywords (such as to left top or to right) or with an angle of rotation. In CSS the units used to express angles can be in the form of deg (degrees), turn, rad (radians), or grad (gradians). The default direction is from top to bottom if none is supplied. Note that I didn't include this so the default direction is used.
2. The remaining arguments are a list of colors and optional values for where the color should start and stop called color stops. You may use as many color stops as you wish. The more color stops you have the narrower each 'band' of color will become. A color stop list without any 'hints', or start and stop points, will have a smooth transition from one color to the next because it will apply the color start and stop points uniformly. If you want an abrupt transition from one color to the next, you would set the stopping percentage of the first color to the same value as the starting percentage of the next color. Some clever and artistic people produce amazing patterns with CSS gradients by taking advantage of the background-image property's ability to stack multiple images (gradients are treated as background-images not background-colors)!

这篇关于CSS:如何从顶部和底部淡入淡出文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！