当超过某些指定行时，如何对最后2-3行应用淡入淡出效果 [英] How to apply fading effect for last 2-3 lines when it is exceeding certain specified lines

问题描述

我想在字体颜色中应用渐变效果，当它超过某些指定的行数。在具有ReportTitle 1的卡中的指定示例中，我希望具有来自行8的衰落效果。但是在下面具有ReportTitle 2的卡中，它不应该应用任何衰落效果，因为它没有超过指定的行数，即示例中的8。如果有一些牌（div）只有少于7的行数，那么应该应用NO淡化效果。

 背景：-webkit-linear-gradient 100px，＃447294，#fff）; 
  

我在网上搜索，但我得到了背景颜色更改为白色或任何其他颜色。但因为我有一个不同的背景颜色在卡，即div，我想有效果的字体颜色，而不是背景颜色。
请参阅链接中的工作示例

$ b $

解决方案

您需要添加类 .card：after 后面的位置绝对位置：

  .card：after {
 content：; 
 position：absolute; 
 bottom：0; 
 height：5em; 
 width：100％; 
 background：linear-gradient（0deg，white，transparent）; 
 background-image：-webkit-linear-gradient（bottom，white，transparent）; 
} 
  

here is jsFiddle

I wanted to apply the fading effect in the font colors when it exceeds some certain specified number of lines. In the specified example in card with "ReportTitle 1" I wanted to have the fading effect from the line 8. But in the below card with "ReportTitle 2" it shouldn't have any fading effects applied because it didn't exceeded the specified number of lines i.e. 8 in the example. In case if there are some cards(div) which has only less number of lines less than 7, then NO fading effect should be applied.

 background: -webkit-linear-gradient(transparent 100px, #447294, #fff);

I searched in the net, but I am getting examples with the background color changing to white or to any other colors. But since I am having a differnt background color in the "Card" i.e. div, i wanted to have the effect on the font color only and not on the background color. Please refer the working example in the link

any ideas how to do this?

解决方案

You need to add class .card:after with position absolute at bottom:

.card:after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 5em;
  width: 100%;
  background: linear-gradient(0deg, white, transparent);
  background-image: -webkit-linear-gradient(bottom, white, transparent);
}

here is jsFiddle

这篇关于当超过某些指定行时，如何对最后2-3行应用淡入淡出效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！