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

【问题标题】：How to fill part of the background with gradient color?如何用渐变色填充部分背景？
【发布时间】：2016-04-19 10:46:01
【问题描述】：

我希望div 带有彩色填充背景：

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

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

如何定义第二个条件？

https://jsfiddle.net/tf4nn5p6/

【问题讨论】：

发布你尝试过的代码
jsfiddle.net/tf4nn5p6

标签： css background-image background-color

【解决方案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>

【讨论】：

背景重复：不重复； - 那就是我没有申请我的尝试！非常感谢！
我在寻找什么

【解决方案2】：

使用下面的 css 进行相同的操作，在这里您可以通过 background-size: 100% 20%; 和 background-position: left bottom; 进行控制，无需重复

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

【讨论】：