Question

我在网站上使用Gray来表示一些元素。但是，我无法在IE11中使用它。例如，在下面的小提琴中，我使用JS添加grayscale和grayscale-fade类，以便在悬停时图像从颜色渐变为灰度。我如何在IE11中使用它？作者说，需要为IE11初始化插件（即$('article.project img').gray();），但如果我添加该行，则所有图像默认从一开始就变为灰色。我只是想在IE11中使用它。有人能告诉我怎么样？

小提琴：http://jsfiddle.net/61jcam54/

HTML

<div id="content">
    <article class="project">
        <img width="375" height="375" src="http://i.imgur.com/jNkpAg6.gif" alt="image-title">
        <div class="overlay" style="margin-left: -1px; width: 367px;">
            <h3>Project Title</h3>
            <a class="post-link expand" href="http://google.com">+</a>
        </div>
    </article>
</div>

CSS

article.project {
  float: left;
  margin: 0 1% 2%;
  max-width: 375px;
  overflow: hidden;
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
}

article.project img {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: auto;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

article.project .overlay {
  background: rgba(0, 0, 0, 0.8);
  bottom: 0;
  display: block;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.hover .overlay, .active .overlay, .hover-sticky .overlay {
    opacity: 1;
}

article.project .overlay h3 {
  color: #FFF;
  font-size: 17px;
  font-size: 1.7rem;
  font-family: 'Montserrat',sans-serif;
  text-transform: uppercase;
  line-height: 1.3;
  margin-top: 3.3em;
  padding: 0 1em;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
}

article.project .overlay .expand {
  border: 5px solid #FFF;
  bottom: 0;
  color: #FFF;
  display: block;
  font-size: 30px;
  height: 60px;
  left: 0;
  line-height: 50px;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 60px;
  z-index: 2;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  border-radius: 30px;
}

/* GRAYSCALE */
.grayscale, .grayscale-sticky {
    /* Firefox 10+, Firefox on Android */
    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");

    /* IE 6-9 */
    filter: gray;

    /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
    */
    -webkit-filter: grayscale(100%);
}

.grayscale.grayscale-fade {
    -webkit-transition: -webkit-filter .2s;
}

.grayscale.grayscale-off,
article:hover .grayscale.grayscale-fade {
    -webkit-filter: grayscale(0%);
    filter: none;
}

.grayscale.grayscale-replaced {
    filter: none;
    -webkit-filter: none;
}

.grayscale.grayscale-replaced > svg {
    opacity: 1;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}

.grayscale.grayscale-replaced.grayscale-off > svg,
article:hover .grayscale.grayscale-replaced.grayscale-fade > svg {
    opacity: 0;
}

JS

$('#content').on('mouseenter', 'article.project', function(){

    $(this).addClass('hover grayscale grayscale-fade');
    $(this).find('.post-link').hide();

}).on('mouseleave', 'article.project', function(){

    $(this).removeClass('hover grayscale grayscale-fade');
    $(this).find('.post-link').show();

});

Answer 1

TL; DR

以下是updated example that works in IE11和所有其他支持的浏览器。

Exaplaination

有一些问题......

根据the plugin that you are using，当浏览器不支持CSS3过滤器时（如IE10 / 11），以下内容适用：

...该插件使用Modernizr._prefixes，css-filters，Inline SVG和svg-filters功能检测来自Modernizr以确定浏览器支持。如果浏览器支持内联SVG和SVG过滤器而不支持CSS过滤器，则插件会将带有过滤器的SVG元素替换为元素。

由于{11}中的img元素需要替换为SVG元素，因此需要使用插件脚本（带Modernizr shiv）才能使其工作。在您提供的jsFiddle示例中，脚本jquery.gray.min.js实际上甚至没有在IE11中执行，因为它由于不匹配的mime类型而被阻止（此警告在控制台中）。

要解决此问题，我只需将脚本复制/粘贴到示例中。此外，值得注意的是Modernizr docs状态脚本必须在 {{1}之前执行负载。当使用HTML5 Shiv时，这似乎与IE相关：

我们建议将Modernizr置于脑海中的原因有两个： HTML5 Shiv（在IE中启用HTML5元素）必须在<body> 之前执行，如果你是使用Modernizr添加的任何CSS类，您将需要阻止FOUC。

现在脚本实际上是在IE11中执行的，需要初始化插件，并且需要用SVG替换<body>元素。根据插件，如果元素具有类img，则img元素将自动被替换。或者，您也可以使用自定义.grayscale方法。由于您的示例实际上并未将类.gray()提供给.grayscale元素，因此它不会在IE11中初始化。

下面，您会注意到我已将img类添加到.grayscale元素（以便在IE11中初始化它）。此外，类img也会添加到元素中，以便灰色效果最初 off 。在更新的jQuery中，您将看到此类刚刚切换。

以下是相关的更新HTML / CSS / jQuery：

Updated Example Here

我也稍微缩短了jQuery：

.grayscale-off

$('#content').on('mouseenter mouseleave', 'article.project', function (e){ $('.grayscale', this).toggleClass('hover grayscale-off'); $(this).find('.post-link').toggle(); });

.grayscale.grayscale-replaced > svg { opacity: 0; -webkit-transition: opacity .2s ease; transition: opacity .2s ease; } .grayscale.grayscale-replaced.grayscale-off > svg { opacity: 1; }

Answer 2

IE喜欢SVG在图像上添加过滤器。以下是在IE10，Firefox和Chrome上实现此目的的方法：http://jsfiddle.net/azx3mxmt/3/

图片以编程方式添加如下：

var container = document.getElementById("container");
var src = "https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG";
for (var i=200 ; i < 2200 ; i += 100) {
    container.appendChild(animation(src, i));   
}

SVG过滤器设置如下：

<svg width="128" height="128" viewBox="0 0 128 128">
  <defs>
    <filter id="filter" >
      <feColorMatrix id="gray" type="saturate" values="0.5"/>
    <filter/>
  </defs>
  <image x="0" y="0" width="128" height="128"
         filter="url(#filter)"
         xlink:href="https://www.gravatar.com/avatar/3ab1c56fadd51711d1d94cc18aa37d8d?s=128&d=identicon&r=PG"/>
</svg>

使用SVG可以实现其他效果。看看这个web site。

悬停时的颜色灰度不适用于IE11

2 个答案:

TL; DR

Exaplaination