亮度和对比度的默认CSS滤镜值

Question

最近我将Chrome更新为v.26,并且使用HTML5画布显示的图片不再可见.正如我发现我不得不改变亮度和对比度.

根据浏览器引擎,CSS过滤器的值如何不同？

默认:

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

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

Answer 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/