Wie fülle ich einen Teil des Hintergrunds mit Farbverlauf?

Question

Ich möchte div mit Farbe gefüllt Hintergrund haben:

• linearen Gradienten von links nach rechts

• nur 20% von der Unterseite des div füllen.

  .my-div { Hintergrundbild: linear-gradient (nach rechts, transparent, #FFEBEE); }

Wie wird der zweite Zustand definiert?

https://jsfiddle.net/tf4nn5p6/

Answer 1

Ist das, was Sie wollen?

.my-div{ 
 
    text-align: center; 
 
    height: 50px; 
 
    background-image: linear-gradient(to right, transparent, #FFEBEE); 
 
    background-size: 100% 20%; 
 
    background-position: left bottom; 
 
    background-repeat: no-repeat; 
 
    border: 1px solid red; 
 
}

<div class='my-div'> 
 
text 
 
</div>

Answer 2

Verwendung unter css für die gleiche und hier durch Hintergrund-Größe steuern kann: 100% 20%; und Hintergrund-Position: links unten; mit no-repeat

.my-div{ 
    height: 50px; 
    background: linear-gradient(to right, transparent, #FFEBEE); 
    background-size: 100% 20%; 
    background-position: left bottom; 
    background-repeat: no-repeat; 
    border: 1px solid red; 
    text-align: center; 
}