IE 10 中的字体（文本）线性渐变。怎么样？

Question

无法在 IE 10 中运行:( 我使用 font-awesome 的图标，并尝试为其添加线性渐变。

background: linear-gradient(top right, red 0%, brown 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

除 IE 之外的所有作品。尝试了不同的前缀，但据我所知，我需要这些前缀：

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

但是google说IE根本不支持它们..我该怎么办？

.icon {
    font-size: 400%;
}

/* Color gradient class, for card icons and titles */
.fa-gradient {

    /* old browsers */
    background: red;

    /* IE10+ */ 
    background: -ms-linear-gradient(top right, red 0%, brown 100%);

    /* Mozilla Firefox */ 
    background: -moz-linear-gradient(top right, red 0%, brown 100%);

    /* Opera */ 
    background: -o-linear-gradient(top right, red 0%, brown 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background: -webkit-gradient(linear, right top, left bottom, color-stop(0, red), color-stop(100, brown));

    /* Webkit (Chrome 11+) */ 
    background: -webkit-linear-gradient(top right, red 0%, brown 100%);

    /* W3C Markup */ 
    background: linear-gradient(to top right, red 0%, brown 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='brown',GradientType=1 );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>

    <i class="fa fa-calendar fa-5x fa-gradient" aria-hidden="true">
    </i>

    <i class="fa fa-users fa-5x fa-gradient" aria-hidden="true">
    </i>
</body>

Answer 1

无法在 IE10 中执行此操作。您唯一的选择是使用图像或 svg 创建带有渐变的图标。

Answer 2

是的，谢谢你们！

@媒体查询有帮助！

/* Color gradient class, for card icons and titles */
.fa-gradient {
    /* old browsers */
    background: red;
    /* IE10+ */
    background: -ms-linear-gradient(top right, red 0%, brown 100%);
    /* Mozilla Firefox */
    background: -moz-linear-gradient(top right, red 0%, brown 100%);
    /* Opera */
    background: -o-linear-gradient(top right, red 0%, brown 100%);
    /* Webkit (Safari/Chrome 10) */
    background: -webkit-gradient(linear, right top, left bottom, color-stop(0, red), color-stop(100, brown));
    /* Webkit (Chrome 11+) */
    background: -webkit-linear-gradient(top right, red 0%, brown 100%);
    /* W3C Markup */
    background: linear-gradient(top right, red 0%, brown 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='brown00', GradientType=1);
    /*background: linear-gradient(linear, left bottom, right top, from(brown), to(red));*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .fa-gradient {
        color: red;
        background: transparent;
    }
}

IE 10 中的字体（文本）线性渐变。怎么样？

Font(text) linear-gradient in IE 10. How?

css

internet-explorer

gradient