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

Question

我想要 div 填充颜色的背景：

从左到右线性渐变
只填充了底部的20%div。

.my-div { 背景图像：线性渐变（向右，透明，#FFEBEE）； }

如何定义第二个条件？

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 相同，在这里您可以通过 background-size: 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;
}

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

How to fill part of the background with gradient color?

css

background-image

background-color