IE 10和11中的灰度？ [英] Grayscale in IE 10 and 11?

问题描述

我正在试图弄清楚如何在IE 10和11中使用灰度。我有一个图标网格，我想要灰度。它构建如下：

I am trying to figure out how to get grayscale to work in IE 10 and 11. I have a grid of icons that I want to grayscale. It's built something like this:

<ul class="medium-block-grid-4 large-block-grid-4">

    <li>
        <a href="#"><figure class="cap-bot report-10x10">
            <figcaption>Caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas lectus non odio bibendum iaculis. Proin a lorem purus.</figcaption>
        </figure></a>
    </li>

    <li>
        <a href="#"><figure class="cap-bot report-10kbonus locked">
            <figcaption><i class="fa fa-lock fa-5x fa-fw" style="margin-bottom: 1rem;"></i><br> Caption. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean egestas lectus non odio bibendum iaculis. Proin a lorem purus.</figcaption>
        </figure></a>
    </li>

<ul>

第一个数字是全彩色。第二个图包含锁定灰度类，使整个图形变灰。它在Chrome，Safari和Firefox中运行良好。但它在IE中不起作用。

The first figure is full color. The second figure contains the classes "locked grayscale" which makes the whole figure gray. It's working fine in Chrome, Safari, and Firefox. But it doesn't work in IE.

我查看了各种解决方案并试图实现一些jQuery插件（例如这一个和 this this ），但似乎它们专门用于灰度图像。有没有办法在IE中灰度图像不是图像？我的图标包含在带有蓝色边框的方形蓝色div中，我想强制一切都变灰。

I've looked at various solutions and tried to implement some jQuery plugins (such as this one and this one), but it seems like of them are written specifically to grayscale images. Is there a way to grayscale items in IE that aren't images? My icons are contained in square blue divs with blue borders, and I'd like to force everything to be gray.

更新：这是使用相关图标小提琴。

推荐答案

试试这个css

a i.fa{color:#ccc;}

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>    
<li>
    <a href="#"><figure class="fig-1 cap-bot">
        <figcaption><i class="fa fa-lock fa-5x fa-fw" style="margin-bottom: 1rem;"></i><br>Caption goes here.</figcaption>
    </figure></a>
</li>
<li>
    <a href="#"><figure class="fig-2 cap-bot locked grayscale">
        <figcaption><i class="fa fa-lock fa-5x fa-fw" style="margin-bottom: 1rem;"></i><br>Caption goes here.</figcaption>
    </figure></a>
</li>
</ul>

这篇关于IE 10和11中的灰度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！