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

Posted 2023-02-24

【中文标题】如何用渐变色填充部分背景？

【英文标题】：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

【参考方案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;