html - 使用 Internet Explorer 的博客中的 css 过滤器显示问题

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: ------> 用于 Mozilla Firefox

o-filter: ------> 我猜是 Opera

ms-filter: ------> 用于 MS Internet Explorer ?

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

感谢您的关注和时间。

Answer 1

使用 https://github.com/iamvdo/pleeease-filters ，我能够将 CSS Filter 转换为它们的 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 一起使用，但有一些注意事项 -

1. 首先，它不支持 hue-rotate 和 saturate 滤镜，因此不会产生相同的效果。

2. 它只适用于 IE 6-9。不支持 IE 10+ 浏览器。这并没有使它变得有用，因为现在微软只推荐(并支持)使用 IE11 - Internet Explorer End of Support

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

因此，使 Filter 在 IE 10-11 上工作的唯一方法是创建一个合适的 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>

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

有点不相关，全屏 GIF 和 CSS 过滤器一起使用可能会非常慢。引用CSS filters, GIFs, and performance .