gpt4 book ai didi

css - IE 10 中的字体(文本)线性渐变。怎么样?

转载 作者:行者123 更新时间:2023-12-02 17:12:46 28 4
gpt4 key购买 nike

无法让它在 IE 10 中工作:(我使用来自 font-awesome 的图标,并尝试为其添加线性渐变。

enter image description here

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 根本不支持它们..我该怎么办?

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

最佳答案

是的,谢谢你们!

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

关于css - IE 10 中的字体(文本)线性渐变。怎么样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48221747/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com