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

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

这是

中的样子

Chrome:Link

IE:Link

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

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

CSS

.gradient-text {
  color: #00e1ff;
}
@supports (mix-blend-mode: lighten) {
  .gradient-text {
    display: inline-block;
    position: relative;
    color: #fff;
    background: #000;
    mix-blend-mode: lighten;
  }
 .gradient-text::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: -webkit-linear-gradient(120deg,#00e1ff, #ffeb50);
    background: linear-gradient(120deg,#00e1ff, #ffeb50);
    pointer-events: none;
    mix-blend-mode: multiply;

  }
}


/* Page styling, ignore */
body {
  margin: 0;
  font-family: "Lato", sans-serif;
  text-align: center;
}

.originals {
  background: #0C2322;
  min-height: 50vh;
  padding: 2em;
}

h3 {
  font-size: 2em;
  margin: 0.5em;
  opacity: 0.9;
}

这使得渐变在 Chrome、Safari 和 Firefox 中保持一致。对于 IE，它会回落到纯青色。

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

gradient is being applied to background instead of text in IE and Firefox

css

gradient

linear-gradients