Javascript 当线性渐变角度为180度/上/下时，JS/jQuery不会返回该角度

我目前有一些CSS如下所示：

.crop-image {
     background-image:  linear-gradient(180deg, 
                                        rgba(34,34,34,1), 
                                        rgba(34,34,34,0)), 
                                        url(https://upload.wikimedia.org/wikipedia/commons/b/bf/Test_card.png);
}

但是，当我尝试通过JavaScript、jQuery或Chrome中的开发工具访问它时，我得到：

     background-image:  linear-gradient(rgb(34,34,34),
                                        rgba(34,34,34,0)), 
                                        url(https://upload.wikimedia.org/wikipedia/commons/b/bf/Test_card.png);

这是移除方向（

180度

或

到底部

都被移除）。另一个问题是，它正在将第一个

rgba

更改为

rgb

。两者的工作原理相同（没有角度与180度或从上到下的角度相同），但会导致JS中的解析问题

这导致我的JavaScript出现了一些问题，它会动态调整渐变，这意味着如果我更改CSS，我将不得不更改JS（即，编写JS以假设或检查第一个值，看它是角度还是颜色）

JSFiddle

其他问题是Chrome将rgba（x，x，x，1）更改为rgb（x，x，x），Firefox将rgba（x，x，x，0）更改为透明的

。（这两种方法都会导致解析问题，但更容易解决）

有没有什么方法可以得到一致的线性梯度分量？或者阻止浏览器更改我的CSS？
我并不认为这是一个bug。如果你仔细想想，你说的话是有道理的

rgba（x，x，x，1）
与刚才所说的
rgb（x，x，x）
是一样的，因为通过将不透明度设置为1，表示元素完全不透明（非透明）

rgba（x，x，x，0）
与将元素设置为完全透明（使其不可见/透明）相同

180deg
将被删除，因为默认情况下该值设置为该值

如果更改不透明度值使其不是0或1，并且如果将
180deg
更改为180以外的任何值，则会显示所有这些值


但是，如果您查看开发人员工具CSS（不使用任何脚本），它将显示为您最初设置它的方式
为什么JS/jQuery不返回CSS中提供的相同值？

jQuery的
.css（）
方法不会返回任何属性的指定值。它返回由用户代理根据规范计算的元素的计算样式。这相当于vanilla JS中的
getComputedStyle
方法。这些函数返回的值不必与指定的值相同。它几乎总是在规格中指定的

发件人：（重点是我的）

获取匹配元素集中第一个元素的计算样式属性值，或为每个匹配元素设置一个或多个CSS属性

请注意，元素的计算样式可能与样式表中为该元素指定的值不同。例如，尺寸的计算样式几乎总是像素，但它们可以在样式表中指定为em、ex、px或%。不同的浏览器可能返回逻辑上但文本上不相等的CSS颜色值，例如#FFF、#ffffff和rgb（255255）

*-为什么几乎总是超出此答案的范围


颜色和渐变的计算值是多少？

根据：（使用背景色作为参考，但所有颜色值的行为相同）

计算值：如果该值是半透明的，则计算值将是相应的rgba（）如果不是，它将是rgb（）对应的一个

我找不到任何关于
线性梯度
的类似文档来描述计算值，但我们可以假设Chrome将指定值转换为最简单的形式，而不改变梯度的实际含义。因此，当角度或方向为默认值时，它将被剥离


解决方案是什么？

因此，目前无法使用
.getComputedStyle
或
.css（）
（jQuery）方法获取alpha为1时的
rgba（）
值。以下是您唯一的选择：


将初始
background image
值设置为JS中的一个变量，并将其用于任何操作，而不是通过JS获取CSS值（或者更好的是，直接通过JS而不是CSS设置值）


window.onload=function（）{
var el=document.querySelector（“.crop image”）；
var initialBg=“线性梯度（180度，rgba（34,34,34,1），rgba（34,34,34,0）），url(https://upload.wikimedia.org/wikipedia/commons/b/bf/Test_card.png)";
el.style.backgroundImage=initialBg；
document.querySelector（'.output'）.textContent=initialBg；
};
。裁剪图像{
高度：300px；
宽度：300px；
}

你是对的，从技术上讲，这不是一个bug（是的，我对开发工具的看法是错误的，这是因为其他原因），但它与其他角度和alpha颜色不一致，使JS中的解析逻辑更加复杂，因为我必须预测chrome/firefox将如何更改我的CSS（据我所知，获取组件渐变的唯一方法是手动解析它）。一种解决方法是使用非精确值（如179、0.01、0.99），否则，您需要JS逻辑到底是什么？为什么不将某些值硬编码到您的JS中并根据需要选择它们？JS逻辑只是在滚动时将渐变的第二个颜色alpha从0逐渐更改为1。我不确定是否始终需要角度（或渐变色）始终保持不变，但更希望能够在CSS中更改，而不必更改JS（或使其更复杂）每次我更改CSS时，我都会尝试使用不精确的值。@Adjit:我已经添加了一个详细的答案，解释了为什么浏览器会这样做，为了完整起见，我已经在我的答案中链接了你的答案。我不想重复它，因为你已经提到了它。