与背景相比，使用CSS拆分文本颜色 [英] Splitting Text Color with CSS when compared to the background

问题描述

我正在努力实现以下目标，但确实很挣扎.我只是想获得对角线的背景，该背景贯穿文本并更改我的选择的颜色.

I'm trying to achieve the following but really struggling. I simply am trying to achieve a diagonal background which goes through the text and changes the colour my choice.

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

I'ved tried using css mixed-blend-mode however it just contrasts my colors rather than having the option to split into two different colors.

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

推荐答案

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

Clipping is an excellent solution.

但是，如果您可以自由地在h2文本上应用渐变，则可以使用一些switcheroo技巧来完成.

But if you have the freedom of applying the gradient on the text of h2 , then it can be done with a little switcheroo trick.

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-color将h2的颜色设置为透明

Basically, one applies the linear-gradient background on the text element , h2 in this case, and use background-clip property to clip the background to extend to the text only . Finally use the text-fill-color to set the color of the h2 to transparent

我刚刚颠倒了上面问题中有关h2和div的渐变色.

I had just reversed the gradient colors from the question above for the h2 and the div .

更多信息可以在这里查看

More info can be seen here

• https://css-tricks.com/almanac/properties/b/background-clip/
• "-webkit-text-fill-color"之间的差异和颜色"?

• https://css-tricks.com/almanac/properties/b/background-clip/
• Difference between "-webkit-text-fill-color" and "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是一项实验技术

这篇关于与背景相比，使用CSS拆分文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！