与背景相比,使用CSS拆分文本颜色

Question

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

我试过使用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>

Answer 1

剪切是一个很好的解决方案.

但如果您可以自由地在文本上应用渐变h2,那么可以使用一点切换器技巧来完成.

h2 {
  background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

基本上,linear-gradient在文本元素中应用背景,h2在这种情况下,使用background-clip属性剪切背景以仅扩展到文本.最后使用将text-fill-colorh2的颜色设置为透明

我刚刚从上面的问题中反转了h2和div的渐变颜色.

更多信息可以在这里看到

• https://css-tricks.com/almanac/properties/b/background-clip/
• "-webkit-text-fill-color"和"color"之间的区别？

body {
  font-size: 16px;
  font-family: Verdana, sans-serif;
}

.wrap {
  width: 50%;
  margin: 0 auto;
  border: 1px solid #ccc;
  text-align: center;
  background: linear-gradient(30deg, #FFF 50%, #adf175 50%);
}

h2 {
  background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="wrap">
  <h2>Hello World</h2>
</div>

警告:background-clip:text是一种实验技术

Answer 2

* {
  margin: 0;
  padding: 0
}

header {
  position: relative;
  height: 100vh;
  min-height: 500px;
  font: 900 35vmin/35vh cookie, cursive;
  text-align: center;
  color: #adf175;
}

header > div {
  min-height: 100%;
}

.foreground {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #adf175;
  color: white;
  clip-path: polygon(30% 0, 100% 100%, 100% 0);
}

h2 {
  position: fixed;
}

<header>
    <div>
        <h2>On A Mission</h2>
    </div>
    <div class="foreground">
        <h2>On A Mission</h2>
    </div>
</header>

混合模式是固定的公式,您可以创造性地使用它们.他们将两个重叠的图像(视觉外观)混合在一起.所以参数是两个重叠的像素.

但是你可以在#clippath,#svg,#javascript等的帮助下创建这样的效果.请访问此网站,例如:https://mathieulevesque.com/en 我猜他们将文本加倍并给出了两种不同的外观.

我刚刚创建了一个快速原型.你可以玩.希望能帮助到你.

如果你想使用干净的代码,你可以在javascript的帮助下创建第二个div.

这个工具可以帮助你玩形状.