亮度和对比度的默认 CSS 过滤器值 [重复]答案

【问题标题】：Default CSS filter values for brightness and contrast [duplicate]亮度和对比度的默认 CSS 过滤器值 [重复]
【发布时间】：2013-03-23 09:17:24
【问题描述】：

最近我将 Chrome 更新到 v.26，使用 HTML5 画布显示的图片不再可见。我发现我必须更改亮度和对比度。

不同浏览器引擎的 CSS 过滤器的 BC 值有何不同？

默认值：

Brightness:  0; contrast 100: Firefox ? 
Brightness:100; contrast:100: Chrome ?

我发现它实际上是 Chrome 的一个错误修复：https://code.google.com/p/chromium/issues/detail?id=168004

【问题讨论】：

标签： css brightness contrast

【解决方案1】：

我找到了这个，它肯定会对你有所帮助。语法是这样的。

.thing_you_want_to_filter {
  /*
    these are all default values, note that hue-rotate and blur have units.
    You'll also need to include the vendor prefixes.
  */
  filter: grayscale(0);
  filter: sepia(0);
  filter: saturate(1);
  filter: hue-rotate(0deg);
  filter: invert(0);
  filter: opacity(1);
  filter: brightness(0);
  filter: contrast(1);
  filter: blur(0px);

  /* Drop shadow has the same syntax as box-shadow – see below for why it's amazing! */
  filter: drop-shadow(5px 5px 10px #ccc);
}

Chrome 18.0+ 和 Safari 6+ 是唯一支持此功能的浏览器。对于版本 6 下的 Safari，它会是这样的：

.img
 {
  -webkit-filter:contrast(100%); /* play with the percentages */
  -webkit-filter:brightness(100%);
 }

您可以自己阅读源代码

http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/ http://css3.bradshawenterprises.com/filters/

【讨论】：

不错。怎么没有 Firefox 插件来调整图像的显示！？ - 用画布做起来不难，看起来用css也可以。