So wenden Sie den Fading-Effekt für die letzten 2-3 Zeilen an, wenn bestimmte bestimmte Zeilen überschritten werden

Question

Ich wollte den Fading-Effekt in den Schriftfarben anwenden, wenn er eine bestimmte bestimmte Anzahl von Zeilen überschreitet. Im angegebenen Beispiel in der Karte mit "ReportTitle 1" wollte ich den Fading-Effekt von der Linie 8 haben. Aber in der unteren Karte mit "ReportTitle 2" sollte es keine ausgebesserten Effekte haben, weil es die spezifizierte nicht überschritten hat Anzahl der Zeilen, also 8 im Beispiel. Für den Fall, dass es einige Karten (div) gibt, die nur eine geringere Anzahl von Zeilen als 7 haben, sollte der NO-Fading-Effekt angewendet werden.

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

ich im Netz gesucht, aber ich bin Beispiele mit der Hintergrundfarbe immer zu weiß oder zu anderen Farben zu ändern. Aber da ich eine unterschiedliche Hintergrundfarbe in der "Karte" habe, d. H. Div, wollte ich den Effekt nur auf die Schriftfarbe und nicht auf die Hintergrundfarbe haben. Bitte beachten Sie das Arbeitsbeispiel in der link

irgendwelche Ideen wie dies zu tun?

Answer 1

Sie benötigen Klasse hinzufügen .card:after mit Position absolut unten:

.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