默认CSS滤镜值的亮度和对比度 [英] Default CSS filter values for brightness and contrast
问题描述
最近我将Chrome更新为v.26,使用HTML5 canvas显示的图片不再显示。因为我发现我不得不改变亮度和对比度。
Recently I've updated Chrome to v.26 and pictures which were displayed using HTML5 canvas were not visible anymore. As I found I had to change to brightness and contrast.
CSS滤镜的BC值如何根据浏览器引擎而不同?
How are the values for BC for CSS filters different depending on the browser engine?
默认值:
Brightness: 0; contrast 100: Firefox ?
Brightness:100; contrast:100: Chrome ?
我发现它实际上是Chrome的一个错误修复: https://code.google.com/p/chromium/issues/detail?id=168004
As I found out it is actually a bug fix for Chrome: https://code.google.com/p/chromium/issues/detail?id=168004
推荐答案
我发现这一点,它一定会帮助你。
语法是这样的。
I found this and it will certainly help you. The syntax is something like this.
.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,它将是这样:
Chrome 18.0+ and Safari 6+ are the only browsers that support this. For Safari under version 6 it would be like this:
.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 /
这篇关于默认CSS滤镜值的亮度和对比度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!