javascript - 当 180 度/顶部/底部时，JS/jQuery 不返回线性渐变 Angular

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。两者的工作原理相同(没有 Angular 与 180 度或从上到下相同)，但会导致 JS 中的解析问题。

这导致我的 JavaScript 出现一些问题，它会动态调整渐变，这意味着如果我更改 CSS，我将不得不更改 JS(即编写 JS 以假定或检查第一个值以查看它是否是一个 Angular 或一种颜色)。

JSFiddle here .

其他问题是 Chrome 将 rgba(x,x,x,1) 更改为 rgb(x,x,x)，Firefox 将 rgba( x,x,x,0) 到透明。 (两者都会导致解析问题，但更容易解决)。

有什么方法可以始终如一地获得线性梯度分量吗？还是为了防止浏览器更改我的 CSS？

Answer 1

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

jQuery 的 .css()方法不返回任何属性的指定值。它返回由用户代理根据规范计算的元素的计算样式。这相当于 getComputedStyle Vanilla JS中的方法。 resolved value这些返回的值不必与指定值相同。它几乎总是^* computed value规范中指定。

来自 jQuery Docs : (重点是我的)

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

Note that the computed style of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

^{* - 为什么几乎总是超出这个答案的范围}

---

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

根据 MDN :(使用 background-color 作为引用，但所有颜色值的行为都相同)

Computed Value: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one.

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

---

解决方案是什么？

所以，目前没有办法得到rgba()使用 .getComputedStyle 时 alpha 为 1 的值或 .css() (jQuery) 方法。以下是您唯一的选择:

• 设置初始background-image将值赋给 JS 中的变量并将其用于任何操作，而不是通过 JS 获取 CSS 值(或者更好的是，直接通过 JS 而不是 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>

• 使用接近(不精确)1 的 alpha 值和 180 度的 Angular 值，如 Adjit's answer 中提到的.

• 或者，解析 CSS 样式表并获取 background-image属性(property)的值(value)。这个可以做，但是很麻烦，不推荐。

---

什么正在准备中？

Level 4 Specs表示计算值将始终为 rgba()颜色，所以也许一旦实现，所有浏览器都会返回 rgba()值与 alpha 无关。但这仍处于草稿模式，因此可能会发生变化(谁知道呢，它甚至可能会被丢弃)。

---

还有什么要考虑的吗？

Firefox 返回 rgba(34,34,34,0)作为transparent可以被认为是一个bug 因为even as per MDN transparent maps only to rgba(0,0,0,0) .然而，它是次要的，因为 alpha = 0 意味着颜色是完全透明的。

The transparent keyword maps to rgba(0,0,0,0).