Как заполнить часть фона цветом градиента?

Question

Я хотел бы иметь div с цветом фона, заполненного:

• линейный градиент слева направо

• заполнение только 20% от нижней части div.

  .my-div { background-image: linear-gradient (справа, прозрачный, #FFEBEE); }

Как определить второе условие?

https://jsfiddle.net/tf4nn5p6/

Answer 1

Является ли это то, что вы хотите?

.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

Использование ниже CSS для того же, и здесь вы можете управлять с помощью фона размер: 100% 20%; и background-position: левое нижнее; с не-повторять

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