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

2023年2月17日 186次阅读

我有一个博客博客多年,我对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模板.

感谢您的关注和时间.

最佳答案 使用
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一起工作,但有一些警告 –

>首先它不支持色调旋转和饱和滤镜,因此不会产生相同的效果.
>它仅适用于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.

点赞