是否可以使用未固定的开始和结束位置在CSS背景中设置渐变? [英] Is it possible to set the gradient in a CSS background using unanchored start and end positions?

问题描述

在SVG渐变中，您可以设置开始x y和结束x y位置.是否可以在CSS线性渐变中使用未锚定的，独立的开始和结束位置(下图所示)来做到这一点?

In an SVG gradient you can set the start x y and end x y position. Is it possible to do that in CSS linear gradient but using unanchored, independent start and end positions (images shown below)?

这是我的CSS线性渐变:

Here is my CSS linear gradient:

#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>

以下是正方形中的预期输出:

Here is the expected output in a square:

预期输出为矩形

我一直在引用此页面在MDN和此页面上.

I've been referencing this page on MDN and this page on W3C.

SVG包含渐变的方向

The SVG contains the orientation of the gradient

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

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

The element also takes several other attributes, which specify the size and appearance of the gradient. The orientation of the gradient is controlled by two points, designated by the attributes x1, x2, y1, and y2. These attributes define a line along which the gradient travels. The gradient defaults to a horizontal orientation, but it can be rotated by changing these. Gradient2 in the above example is designed to create a vertical gradient. - from https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients

来自其他文档:

渐变线起点的X和Y位置，为 对象的边界框:X = 0表示边界的左边缘 框，X = 1表示右边缘.渐变线可能会开始或 结束于对象边界框之外，因此值可能< 0或> 1.

X and Y position of the start of the gradient line, as a multiple of the object's bounding box: X=0 indicates the left edge of the bounding box and X=1 indicates the right edge. The gradient line may start or end outside the object's bounding box, so values may be < 0 or > 1.

可能还会出现转换前/转换后的问题.

There also may be going a pre transform / post transform issue.

在我的项目中，我得到了正方形/矩形的宽度和高度，起点和终点(渐变线)，颜色终止色和颜色终止率.每次梯度线都不同.

In my project I get the width and height of the square / rectangle, the start and end points (gradient lines), the color stop colors and the color stop ratios. The gradient lines are different each time.

推荐答案

您可以考虑使用calc()来合并像素值和百分比值.百分比值将定义参考，像素将定义渐变长度，然后将长度乘以每种颜色的百分比:

You can consider the use of calc() where you will combine pixel and percentage value. The percentage value will define the reference and the pixel will define the gradient length and you multiple the length with the percentage of each color:

.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%处设定了终点.您可以在起点上做同样的事情:

In the above I made the end point at 50%. You can do the same for the starting point:

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

这篇关于是否可以使用未固定的开始和结束位置在CSS背景中设置渐变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！