当渐变角度为180度、top或to bottom时，JS/jQuery无法返回线性渐变角度。

Question

我目前有这样的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);

这段代码删除了方向（180deg或to bottom都会被删除）。另一个问题是将第一个rgba更改为rgb。两者功能相同（没有角度等同于180度或自上而下），但会导致JS解析问题。

这会导致我的JavaScript出现一些问题，因为它动态调整渐变，并意味着如果我更改CSS，则必须修改JS（即编写JS以假定或检查第一个值是否为角度或颜色）。

JSFiddle here.

其他问题是Chrome将rgba(x,x,x,1)更改为rgb(x,x,x)，Firefox将rgba(x,x,x,0)更改为transparent。（这两个也会导致解析问题，但稍微容易解决一些）。

有没有办法始终获得线性渐变组件？或防止浏览器更改我的CSS？

- Jonathan

Answer 1

为什么JS/jQuery返回的值与CSS中提供的值不同？

jQuery的.css()方法不会返回任何属性的指定值。它返回元素的计算样式，该样式由用户代理基于规范计算而成。这相当于纯JS中的getComputedStyle方法。这些方法返回的已解析值可能与指定值不同。通常情况下^*，这是在规范中指定的计算值。

来自jQuery文档（重点是我的）：

获取匹配元素集合中第一个元素的计算样式属性值，或为每个匹配的元素设置一个或多个CSS属性。请注意，元素的计算样式可能与样式表中指定的元素值不同。例如，尺寸的计算样式几乎总是像素，但可以在样式表中指定为em、ex、px或%。不同的浏览器可能返回逻辑上但不是文本上相等的CSS颜色值，例如#FFF、#ffffff和rgb(255,255,255)。* - 为什么几乎总是超出了这个答案的范围。

---

计算出的颜色和渐变值是什么？

根据MDN：（以background-color为参考，但所有颜色值的行为相同）

计算值：如果该值是半透明的，则计算值将是相应的rgba()。 如果不是，则为相应的rgb()。

我找不到任何类似的linear-gradient文档描述计算值是什么，但我们可以假设Chrome将指定的值转换为其最简形式，而不会改变渐变的实际含义。因此，当它是默认值时，角度或方向被剥离。

---

有哪些解决方案？

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

• Set the initial background-image value to a variable in JS and use it for any manipulations instead of getting the CSS value through JS (or better still, set the value directly via JS instead of CSS).

  window.onload = function() {
    var el = document.querySelector(".crop-image");
    var initialBg = "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)";
    el.style.backgroundImage = initialBg;
    document.querySelector('.output').textContent = initialBg;
  };

  .crop-image {
    height: 300px;
    width: 300px;
  }

  <div class="crop-image"></div>
  <div class="output"></div>

• Use values that are close (not exact) to 1 for alpha and 180 degree for the angles like mentioned in Adjit's answer.

• Or, parse the CSS stylesheet and get the background-image property's value. This can be done but it is very cumbersome and I won't recommend it.

---

管道里有什么？

Level 4 Specs表明，计算值始终为rgba()颜色，因此一旦实现，所有浏览器都将返回rgba()值，而不考虑alpha。但是这仍处于草案模式，因此可能会发生变化（谁知道，甚至可能被删除）。

---

还有其他需要考虑的问题吗？

Firefox将rgba(34,34,34,0)返回为transparent可能被认为是一个错误，因为即使根据MDN，transparent仅映射到rgba(0,0,0,0)。但是，这只是次要问题，因为alpha = 0表示颜色完全透明。

transparent关键字映射到rgba（0,0,0,0）。

- Harry

Answer 2

我并不认为这是一个bug。如果你仔细思考一下，你所说的话是有道理的。

rgba(x,x,x,1) 和 rgb(x,x,x) 是相同的，因为将不透明度设置为1，意味着元素完全不透明（不透明）。

rgba(x,x,x,0) 等同于将元素设置为完全透明（使其无形/透明）

180deg 被删除了，因为默认情况下值被设置为它。

如果你改变不透明度值，使其不为0或1，如果你将 180deg 更改为除180以外的任何值，你将看到这些值显示出来。

https://jsfiddle.net/bxLg4jzy/2/

然而，如果你查看开发者工具CSS（不使用任何脚本），它将显示你最初设置的方式。

- Adjit

---

你是正确的，这不是一个技术性的错误，（是的，我关于开发工具的说法是错误的，那是因为其他问题），但它与其他角度和alpha颜色不一致，并且会让JS中的解析逻辑更加复杂，因为我必须预测Chrome / Firefox如何更改我的CSS（据我所知，获取组件渐变的唯一方法是手动解析它）。 - Jonathan

一个解决方法是使用非精确值（如179、0.01、0.99），否则，你需要你的JS逻辑具体是什么呢？为什么不在JS中硬编码某些值，并根据需要进行选择？ - Adjit

JS的逻辑只是逐渐将渐变的第二个颜色的alpha值从0更改为1，随着您的滚动而变化。 我不确定我是否总是希望角度（或渐变颜色）始终相同，但更喜欢能够在CSS中更改而无需每次更改CSS时更改JS（或使其更加复杂）。 尽管如此，我现在会尝试使用非精确值。 - Jonathan

@Adjit：我添加了一份详细的答案，解释了浏览器为什么会有这种行为，并且为了完整性，我已经在我的答案中链接了你的答案。我不想重复它，因为你已经提到了。如果你不同意我添加的内容，就告诉我，我会将其删除 :) - Harry