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;

但谷歌表示IE根本不支持它们。我该怎么办？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

是的，谢谢你们！

@media查询帮助了！

/* 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;
    }
}

Answer 2

在IE10中没有办法使这项工作。您唯一的选择是使用图像或svg来创建带有渐变的图标。

IE 10中的字体（文本）线性渐变。如何？

2 个答案: