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

Question

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

Answer 1

您可以使用 2 个线性渐变来执行此操作，如下所示。

第一个渐变将以矩形填充宽度的 35%，然后第二个渐变将在第一个渐变以 40% 的宽度和三 Angular 形结束时开始，所以你将有 35%+40% =顶部 75%，底部保留 35%:

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

<div class="box">

</div>

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

首先，我们需要了解百分比值如何与 background-position 一起使用。你可以看看this link了解更多信息和一些说明。考虑到这一点，这里有一张图来显示我们需要计算的 background-position-x 的值(我称之为 p)

考虑到背景位置的计算方式，我们知道 p 定义了百分比outside，x 定义了百分比inside 并且两者相等。由此我们可以得到 x 和 p 之间的关系，即 (x/40) = (p/100) ~ x = 0.4*p。我们还可以清楚地看到 p - x 等于第一个梯度的宽度，即 35%，所以我们有:

p - x = 35% => p - 0.4*p = 35% => 0.6*p = 35% => p=35%/0.6