获取 CSS 过滤器后的背景颜色答案

【问题标题】：Get background color after CSS filters获取 CSS 过滤器后的背景颜色
【发布时间】：2016-06-29 19:20:01
【问题描述】：

我有一个用背景颜色填充的 div。使用 Javascript，我在 div 周围使用 3 个包装器以动态方式更改色调、饱和度和亮度过滤器，每个包装器都有一个过滤器。

   <div class="filterHue">
      <div class="filterSaturation">
         <div class="filterLightness">
            <div class="baseColor"></div>
         </div>
      </div>
   </div>

如何在过滤器之后获得baseColor div 的结果背景颜色，以便将该颜色应用于多个文本元素？

我想出的唯一解决方案是将文本元素以与 div 相同的方式包装，但我认为在页面上设置太多过滤器有点过头了，如果可能的话，我更喜欢另一种解决方案。

【问题讨论】：

Window.getComputedStyle() 怎么样？另外，请发布您的 CSS。

标签： javascript html css css-filters

【解决方案1】：

我认为您无法从 div 中获取计算出的颜色。但是您可以使用 javascript 来计算过滤器对基色的影响。看看这个库 - https://github.com/bgrins/TinyColor

有lighten、saturate、spin等方法

【讨论】：

效果很好，但颜色有点不同。（我使用的不是单一颜色，而是渐变）我完全移除了滤镜并使用这个库来计算颜色。

【解决方案2】：

我不这么认为。我认为window.getComputedStyle() 可能会有所帮助。但我认为它没有考虑解析的背景颜色。

下面的代码仍然输出：

rgb(0, 0, 255)

var e = document.querySelectorAll("div.test")[0];

alert(window.getComputedStyle(e, null)["background-color"]);

.test {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: blue;
  filter: grayscale(100%);
}

&lt;div class="test"&gt;&lt;/div&gt;

【讨论】：