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:

我试图找出如何让灰度在IE 10和11中工作。我有一个图标网格,我想要灰度。它的构建如下:

<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>

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.

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

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.

我已经查看了各种解决方案,并试图实现一些jQuery插件(例如这一个和这个),但似乎它们是专门为灰度图像编写的。有没有办法在IE中灰度图像不是图像?我的图标包含在带蓝色边框的方形蓝色div中,我想强制一切都是灰色的。

UPDATE: Here is a fiddle with the icons in question.

更新:这是一个有问题的图标的小提琴。

1 个解决方案

#1

Try this css

试试这个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>

1 个解决方案

#1

更多相关文章

随机推荐