如何用渐变色填充部分背景？

Question

我想要div填充背景颜色：

• 从左到右的线性渐变

• 仅从div的底部填充20％。

  .my-div {     background-image：线性渐变（右边，透明，＃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％; 和背景位置：左下角; 进行无重复控制

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