我想添加一个可变顶部和底部宽度的线性渐变

Question

所以我想对图片应用线性渐变，使其在顶部宽度为75％，底部为35％。我环顾四周，但到目前为止似乎没有运气

Answer 1

您可以使用2个线性渐变来完成此操作。

第一个渐变将填充直到35％的宽度为矩形，然后第二个渐变将在第一个以宽度为40％和三角形结束时开始，因此您将有35％+ 40％= 75％在顶部，我们在底部保持35％：

＆＃13;

＆＃13;

.box {
  height:300px;
  background:
  linear-gradient(to bottom right,rgba(0,180,0,0.7) 50%,transparent 50.5%) calc(35% / 0.6) 0/40% 100% no-repeat,
  linear-gradient(to right,rgba(0,180,0,0.7),rgba(0,180,0,0.7)) 0 0/35.05% 100% no-repeat,
  url(https://lorempixel.com/1000/1000/) center/cover no-repeat
}

＆＃13;

<div class="box">

</div>

＆＃13;

＆＃13;

＆＃13;

几乎所有使用的值都很容易理解。第一个渐变位于[0,0]，宽度为35%，高度为100%。对于第二个，高度/宽度是清晰的，但位置有点棘手，所以我将解释它。

首先，我们需要了解百分比值如何与background-position一起使用。您可以查看this link以获取更多信息和插图。考虑到这一点，这里有一个图形，显示我们需要计算background-position-x的值（我将称之为 p ）

考虑如何计算背景位置，我们知道p定义百分比在外，x定义百分比在内并且两者相等。由此我们可以得到x和p之间的关系(x/40) = (p/100)〜x = 0.4*p。我们还可以清楚地看到p - x等于第一个渐变的宽度，即35％，所以我们有：

p - x = 35% =＆gt; p - 0.4*p = 35% =＆gt; 0.6*p = 35% =＆gt; p=35%/0.6