相关疑难解决方法(0)

我正在努力实现以下目标,但真的很挣扎.我只是试图获得一个穿过文本的对角背景并改变我选择的颜色.

我试过使用css混合混合模式,但它只是对比我的颜色,而不是选择分成两种不同的颜色.

* {
  margin: 0;
  padding: 0
}

header {
  overflow: hidden;
  height: 100vh;
  background-color: #FFF;
  background-image: -webkit-linear-gradient(30deg, #FFF 50%, #adf175 50%);
  min-height: 500px;
}

h2 {
  color: white;
  font: 900 35vmin/35vh cookie, cursive;
  text-align: center;
  position: fixed;
  top: 0px;
  left: 20px;
  mix-blend-mode: difference;
}

h2:after {
  color: white;
  mix-blend-mode: difference;
}

<header>
  <h2>On A Mission</h2>
</header>

我很难解决这个谜。我创建了一个“敲除文本”效果，并使用：after将分隔符添加到了h2中。除了iOS（10.3.2）上的Safari之外，它在我测试过的所有内容上看起来都很棒。

链接到一个无用的临时修复小提琴。

h2.gradient {
    color: #013c65;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 2em;
    line-height: 1em;
    background: linear-gradient(1deg, #800909, #332222);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -ms-background-clip: text;
    -ms-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
h2.gradient:after {
    content: '';
    position: relative;
    display: block;
    height: .12em;
    width: 2.5em;
    background-image: linear-gradient(1deg, #800909, #332222);
    top: .5em;
}

像问题看起来都似乎是相结合background-clip: text;，text-fill-color: transparent;并与伪元素：display: block;。

我能够绝对定位并内联显示伪元素。目前，我已经将标头包裹<div class="special-heading">在div之后并添加了分隔符。

iOS会不会有这样的原因，或者其他人也遇到过类似的问题吗？我发现添加零宽度的空间​使它神奇地工作了。

但是，我认为这可能是一个错误，因为我可以偶尔在Mac上打开Web检查器的情况下使用原始方法。

感谢您的想法！

有没有办法在下面的示例中实现效果,而不重复内容,只使用html和css？

所以你基本上有一个文字,一边是color1和background1,另一边是color2加background2？

要复制的示例代码:

<div style="width: 50%; background-color: black; overflow: hidden; height: 300px;display: inline-block;">
    <p style="width: 200%; color: white">
    I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content? I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do …