Question

我为网页上的某些文字设置了CSS渐变。它适用于Chrome和Safari，但未正确应用于IE10，IE11或Firefox。在这些浏览器中，渐变将作为背景颜色应用，而不是作为文本本身的渐变。

.originals h3, .gradient-text {
    color: #00A3B8;
    font-size: 2em;
    font-weight: 800;
    /* Newer Browsers */
    background: linear-gradient(330deg, #00e1ff 0%, #ffeb50 100%);
    /* Opera 11.10+ */
    background: -o-linear-gradient(330deg, #00e1ff 0%, #ffeb50 100%);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(330deg, #00e1ff 0%, #ffeb50 100%);
    /* Chrome 7+ & Safari 5.03+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00e1ff), color-stop(1, #ffeb50));
    /* IE10+ */
    background: -ms-linear-gradient(330deg, #00e1ff 0%, #ffeb50 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    width: 80%;
    margin: 0 auto;
    padding: 0;
}

这是

中的样子

铬：Link

IE：Link

火狐：Link

有人可以指出我对这些浏览器做错了什么吗？非常感谢任何帮助！

更新：以下是应用渐变的HTML：

<div class="originals">
    <div class="wrapper">
        <h3 class="gradient-text">We make, design, engineer, create, illuminate, record, capture, code, program, open, decide, speak, blend, paint, construct, launch, markup, ignite, form, defend, ink.</h3>
        <img src="/img/myLogo.png" alt="logo" />
    </div>
</div>

Answer 1

您正在使用

-webkit-background-clip:text

这就是你的问题。请在https://codepen.io/TimPietrusky/pen/cnvBk咨询polyfill，以便在IE浏览器中工作。

Answer 2

我和我的一位非常擅长CSS的朋友交谈，他能够使用以下代码解决问题：

<强> HTML

function parallelize_hostnames($url, $id) {
$hostname = par_get_hostname($url); //call supplemental function
$url = str_replace(parse_url(get_bloginfo('url'), PHP_URL_HOST), $hostname, $url);
return $url;
}

function par_get_hostname($name) {
$subdomains = array('static1.domain.com','static2.domain.com');
$host = abs(crc32(basename($name)) % count($subdomains));
$hostname = $subdomains[$host];
return $hostname;
}

add_filter('wp_get_attachment_url', 'parallelize_hostnames', 10, 2);

<强> CSS

<section class="originals">
  <h3 class="gradient-text">We make, design, engineer, create, illuminate, record, capture, code, program, open, decide, speak, blend, paint, construct, launch, markup, ignite, form, defend, ink.</h3>
</section>

这使得Chrome，Safari和Firefox中的渐变一致。对于IE，它会回落为纯青色。

在IE和Firefox中，渐变被应用于背景而不是文本

2 个答案: