CSS3 Firefox滤镜灰度没有模糊效果矩阵 [英] CSS3 Firefox filter grayscale without blur effect matrix

问题描述

现在我有以下代码来灰度化我的图像（在这里可以找到stackoverflow）。问题是这也模糊了图像。我想要一个矩阵，只调整颜色灰度，而不是改变我的图片模糊。

CSS代码：

  filter：url（svg / filters.svg＃grayscale）; 
过滤器：灰色; / * IE6-9 * / 
 filter：url（data：image / svg + xml; utf8，< svg xmlns = \'http：//www.w3.org/2000/svg\ >< filter id = \'grayscale \'>< feColorMatrix type = \'matrix \'values = \\\\\\\\\''0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 \'/>< / filter>< / svg> #grayscale）; / * Firefox 3.5+ * / 
 -webkit-filter：灰度（100％）; / * Google Chrome& Safari 6+ * / 
  

解决方案

尝试使用 filterRes 属性定义中间图像的宽度和高度，以像素为单位

，可能会对图像质量产生严重影响。看到这个例子：

http://jsfiddle.net/Jxtjt /

 < img src ='http：//upload.wikimedia.org/wikipedia/commons/7 /70/Example.png'> 
 $ b $ img {
 filter：url（data：image / svg + xml; utf8，< svg xmlns ='http：//www.w3.org/2000/svg'> ;< filter id ='grayscale'filterRes ='600'>< feColorMatrix type ='matrix'values ='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/> ;< /滤光器>< / SVG> #grayscale）; 
} 
 img：hover {
 filter：url（data：image / svg + xml; utf8，< svg xmlns ='http：//www.w3.org/2000/ svg'>< filter id ='grayscale'>< feColorMatrix type ='matrix'values ='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/>< ; /滤光器>< / SVG> #grayscale）; 
 
 
 
 $ b原始过滤器使用 filterRes > 600 像素的设置，至少在我的显示器上看起来不错，在其他显示器上可能看起来不一样，尤其是在HI- DPI的。将鼠标悬停在图片上，即可查看正在应用的过滤条件，而不需要设置 filterRes 属性。
 
 
 
根据您的使用情况这可能是一个解决方法。
 
 
 
对我来说，这看起来像一个Firefox中的错误（你可能想要一个 bug report ）。根据规范，用户代理负责计算在输出设备上看起来不错的值，以防他们没有设置，所以也许这就是Firefox出错的地方，不知道。
 
What i have now is the following code to grayscale my image (found here on stackoverflow). Problem is this also blurres the image. I would like a matrix that only adjusts the color to grayscale, and not changing the blurriness of my picture.

CSS Code:
filter: url(svg/filters.svg#grayscale);
filter: gray; /* IE6-9 */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
-webkit-filter: grayscale(100%); /* Google Chrome & Safari 6+ */

解决方案
Try playing with the filterRes attribute, it defines the

  
width and height of the intermediate images in pixels
and can have an drastic impact on the image quality. See this example:

http://jsfiddle.net/Jxtjt/
<img src='http://upload.wikimedia.org/wikipedia/commons/7/70/Example.png'>

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale' filterRes='600'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
}
img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale' ><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
}
The original filter uses an filterRes setting of 600 pixels, which looks ok at least on my display, it may look different on other displays, maybe especially on HI-DPI ones. Hover over the image to see the filter being applied without the filterRes attribute being set.

Depending on your use case this might be a workaround for you.

To me this looks like a bug in Firefox (you may want to file a bug report). According to the specs, the user-agent is responsible for calculating values that look good on the output device in case they weren't set, so maybe that's where Firefox goes wrong, not sure.

                        
这篇关于CSS3 Firefox滤镜灰度没有模糊效果矩阵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！