Question

我有一个博客博客多年，我对CSS过滤器有一些担忧。

我想对此发表意见。

问题1 -

我在博客模板中使用CSS过滤器来编辑我博客底部的动画GIF（色调，饱和度，亮度......）。（见下文）。

.filter-wrapper {
  position: relative;
  z-index: 9999;
}

body#layout .filter-wrapper {
  position: relative !important;
}

body#layout #fb-root {
  position: relative !important;
}

#fb-root {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url(https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif);
  height: 100%;
  width: 100%;
  -webkit-filter: blur(9px) brightness(25%) sepia(88%) hue-rotate(125deg) saturate(344%);
  -moz-filter: blur(9px) brightness(25%) sepia(88%) hue-rotate(125deg) saturate(344%);
  -o-filter: blur(9px) brightness(25%) sepia(88%) hue-rotate(125deg) saturate(344%);
  -ms-filter: blur(9px) brightness(25%) sepia(88%) hue-rotate(125deg) saturate(344%);
  filter: blur(9px) brightness(25%) sepia(88%) hue-rotate(125deg) saturate(344%);
}

CSS过滤器适用于所有网络浏览器，如Chrome，Mozilla，Safari等。

但是，当我使用上面说的Internet Explorer过滤器不再有效时。不幸的是，经过多次研究后我试图找到有关它的信息，我得出结论，我使用的过滤器的某些功能在IE上被禁用。

作为CSS和互联网浏览器架构的新手，我想对此有所了解。

可能有办法在IE中为我的背景获得与其他浏览器相同的结果。

如果是这样，他们会是什么？

问题2 -

除了过滤器设置，我注意到有不同浏览器的线条。

moz-filter：-------＆gt;对于Mozilla Firefox

o-filter：-------＆gt;我猜对于Opera

ms-filter：-------＆gt;对于MS Internet Explorer？

但是当我更改与不同浏览器关联的这些行的值时，我看到没有变化，这是正常的吗？我加入了html模板。

感谢您的关注和时间。

Answer 1

使用https://github.com/iamvdo/pleeease-filters，我能够将CSS过滤器转换为其SVG等价物

filter: blur(9px) brightness(25%) sepia(88%) hue-rotate(125deg) saturate(344%);

转换为

filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filtersPicture"><feGaussianBlur stdDeviation="9" /><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.25" /><feFuncG type="linear" slope="0.25" /><feFuncB type="linear" slope="0.25" /></feComponentTransfer><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.46584000000000003 0.67672 0.16632 0 0 0.30712 0.7236800000000001 0.14784 0 0 0.23936000000000002 0.46992 0.23528 0 0 0 0 0 1 0" /><feColorMatrix type="hueRotate" color-interpolation-filters="sRGB" values="125" /><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="2.92028 -1.7446000000000002 -0.17568 0 0 -0.51972 1.7298 -0.17568 0 0 -0.51972 -1.7446000000000002 3.26432 0 0 0 0 0 1 0" /></filter></svg>');

但这在IE11中无效。

可能的替代方案是CSS Filters Polyfill，这可以使它与IE一起使用，但有一些警告 -

首先，它不支持hue-rotate和saturate过滤器，因此不会产生相同的效果。
它仅适用于IE 6-9。 IE 10+浏览器不受支持。这不会使它变得有用，因为现在微软只推荐（和支持）使用IE11 - Internet Explorer End of Support

此polyfill不适用于Internet Explorer 11的原因是因为没有任何过滤器格式在其中工作。 IE 6-9支持的旧格式已从中删除（请参阅-ms-filter property），其他所有浏览器实现的CSS过滤器从未实现过。

因此，使IE 10-11上的Filter工作的唯一方法是创建一个合适的SVG元素，然后在其上应用SVG过滤器（这就是为什么上面的SVG过滤器不起作用的原因，因为它是在里面指定的CSS。）

使用过滤器和图像创建SVG元素。

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="filtersPicture">
            <feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.25"></feFuncR><feFuncG type="linear" slope="0.25"></feFuncG><feFuncB type="linear" slope="0.25"></feFuncB></feComponentTransfer><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.46584000000000003 0.67672 0.16632 0 0 0.30712 0.7236800000000001 0.14784 0 0 0.23936000000000002 0.46992 0.23528 0 0 0 0 0 1 0"></feColorMatrix><feColorMatrix type="hueRotate" color-interpolation-filters="sRGB" values="125"></feColorMatrix><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="2.92028 -1.7446000000000002 -0.17568 0 0 -0.51972 1.7298 -0.17568 0 0 -0.51972 -1.7446000000000002 3.26432 0 0 0 0 0 1 0"></feColorMatrix>
        </filter>
    </defs>
    <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="750" height="750" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif"></image>
</svg>

此外，现在微软已经在更新的Windows 10上发布了Edge浏览器。它支持CSS过滤器，但需要通过标志打开它们（请参阅Learn how to use CSS3 Filters）。

有点不相关，全屏GIF和CSS过滤器一起可能非常慢。请参阅CSS filters, GIFs, and performance。

使用Internet Explorer

1 个答案: