CSS筛选器无法在Firefox中使用

小编典典

CSS筛选器无法在Firefox中使用

css

我正在尝试CSS过滤器，但在我的Firefox（15.0）浏览器中不起作用。

HTML：

<div class="google">
     <img src="https://www.google.com/images/srpr/logo3w.png">
</div>

CSS：

.google{   
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

阅读 343

2020-05-16

共1个答案

小编典典

GrayScale具有使用-moz-filter在Firefox中运行的限制。

要使其正常工作，请使用以下代码段：

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+ */

2020-05-16