Question

我正在尝试使用背景图像灰度制作div，使用此处描述的方法：Greyscale Background Css Images

我的HTML：

<div class="entry box post" style="background-image: url(../img/some-image.jpg);"></div>

我的SCSS：

 .box {

    width: 100%;
    position: relative;
    border-left: solid 1px rgba(255, 255, 255, 0);
    border-right: solid 1px rgba(255, 255, 255, 0);
  }

.entry.box.post {

    background: url(../img/blog_example.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 105%;
    -moz-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");
    -o-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");
    -webkit-filter: grayscale(100%);
    filter: gray;
    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");
}

div具有由php设置的内联样式。

在Mac Firefox和Chrome上这没关系，但在IE 10-11（VirtualBox）上，该方法无效。我也尝试了几个库，似乎没有任何东西可以使这些盒子变成黑色和白色。

有没有人有想法，我在这里可能会缺少什么？

如何在IE10-11上制作灰度SVG滤镜

0 个答案: