代码之家 › 专栏 › 技术社区 › Pallas Aleksander

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

linear-gradients gradient css

Pallas Aleksander · 技术社区 · 8 年前

.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

即: Link

Link

更新日期:

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

2 回复 | 直到 5 年前

diynevala 8 年前

您正在使用

-webkit-background-clip:text

https://codepen.io/TimPietrusky/pen/cnvBk 在IE浏览器中工作。

Pallas Aleksander 8 年前

我和一位非常擅长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>

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来说,它会回落到纯青色。

推荐文章