是否可以使用未锚定的开始和结束位置在 CSS 背景中设置渐变？

Question

在 SVG 渐变中，您可以设置开始 x y 和结束 x y 位置。是否可以在 CSS 线性渐变中做到这一点，但使用未锚定的、独立的开始和结束位置（如下图所示）？

这是我的 CSS 线性渐变：

#rectangle {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(225deg, rgba(255,255,255,1) 0%, rgba(250,0,0,1) 27.59%, rgba(108,22,95,1) 76.35%, rgba(39,32,32,1) 100%)
}

<div id="rectangle">

</div>

这是正方形的预期输出：

矩形中的预期输出

我一直在 MDN 上引用 this page，在 W3C 上引用 this page。

SVG 包含渐变的方向

x1="1" x2="0.5" y1="0" y2="0.5"

该元素还具有其他几个属性， 指定渐变的大小和外观。方向 梯度由两个点控制，由 属性 x1、x2、y1 和 y2。这些属性定义了一条线 梯度行进的地方。渐变默认为水平 方向，但可以通过更改这些来旋转。 Gradient2 在 上面的示例旨在创建垂直渐变。 - 来自https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients

来自其他文档：

渐变线起点的 X 和 Y 位置，作为的倍数 物体的边界框：X=0 表示边界的左边缘 框，X=1 表示右边缘。渐变线可以开始或 在对象的边界框之外结束，因此值可能是 1。

也可能会出现转换前/转换后的问题。

在我的项目中，我得到了正方形/矩形的宽度和高度、起点和终点（渐变线）、色标颜色和色标比率。渐变线每次都不一样。

Answer 1

您可以考虑使用calc()，您将在其中结合像素和百分比值。百分比值将定义参考，像素将定义渐变长度，您可以将长度乘以每种颜色的百分比：

.rectangle {
  width: 200px;
  height: 100px;
  display:inline-block;
  border:1px solid;
  
  background: linear-gradient(225deg, 
    rgba(255,255,255,1) calc(50% - 70px*(1 - 0)), 
    rgba(250,0,0,1)     calc(50% - 70px*(1 - 0.2759)), 
    rgba(108,22,95,1)   calc(50% - 70px*(1 - 0.7635)), 
    rgba(39,32,32,1)    calc(50% - 70px*(1 - 1)))
}

<div class="rectangle">

</div>

<div class="rectangle" style="width:100px;">

</div>

<div class="rectangle" style="width:300px;">

</div>

在上面，我在50% 做了结束点。你可以对起点做同样的事情：

.rectangle {
  width: 200px;
  height: 100px;
  display:inline-block;
  border:1px solid;
  
  background: linear-gradient(225deg, 
    rgba(255,255,255,1) calc(50% + 70px*0), 
    rgba(250,0,0,1)     calc(50% + 70px*0.2759), 
    rgba(108,22,95,1)   calc(50% + 70px*0.7635), 
    rgba(39,32,32,1)    calc(50% + 70px*1))
}

<div class="rectangle">

</div>

<div class="rectangle" style="width:100px;">

</div>

<div class="rectangle" style="width:300px;">

</div>