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

时间：2018-11-09 09:29:52

标签： javascript html css css3

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

Split Text Image Example

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

4 个答案:

答案 0 :(得分：6)

剪辑是一个很好的解决方案。

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

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

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

更多信息可以在这里查看

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是一项实验技术

答案 1 :(得分：5)

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

混合模式为fixed formulas，您可以创造性地使用它们。它们将两个重叠的图像（视觉外观）混合在一起。所以参数就是两个重叠像素。

但是您可以在＃clippath，＃svg，＃javascript等帮助下创建这样的效果。 例如，请访问此网站：https://mathieulevesque.com/en 我想他们把文本加倍了，并给了它两种不同的外观。

我刚刚创建了一个快速原型。你可以玩。希望对您有所帮助。

如果要使用干净的代码，则可以在javascript的帮助下创建第二个div。

This tool可以帮助您玩转形状。

答案 2 :(得分：2)

这是使用比clip-path和background-clip:text更多受支持的功能的另一个想法。这个想法是依靠歪斜变换和一些隐藏的溢出。

我使用CSS变量具有更好的灵活性，但是如果我们需要旧的浏览器支持，可以很容易地省略它们。

:root {
  --c1:#adf175;
  --c2:#f3f3f3;
}

.box {
  font-size: 20px;
  font-family: Verdana, sans-serif;
  color:var(--c1);
  background:var(--c2);
  padding:20px;
  position:relative;
  display:inline-block;
  overflow:hidden;
}
.box:before {
  content:var(--text);
}
.box span {
  position:absolute;
  top:0;
  left:-20px;
  right:var(--p,50%);
  bottom:0;
  padding:inherit;
  background:var(--c1);
  color:var(--c2);
  white-space:nowrap;
  overflow:hidden;
  transform:skew(15deg);
}
.box span:before{
  content:var(--text);
  display:inline-block;
  margin-left:20px; /*Same value as left on the span*/
  transform:skew(-15deg); /*same value as the skew on the span*/
}
<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:80%">
<span></span>
</div>

我们可以引入另一个变量来控制偏斜：

:root {
  --c1:#adf175;
  --c2:#f3f3f3;
}
.box {
  font-size: 20px;
  font-family: Verdana, sans-serif;
  color:var(--c1);
  background-color:var(--c2);
  padding:20px;
  position:relative;
  display:inline-block;
  overflow:hidden;
}
.box:before {
  content:var(--text);
}
.box span {
  position:absolute;
  top:0;
  left:-50px;
  right:var(--p,50%);
  bottom:0;
  padding:inherit;
  color:var(--c2);
  background-color:var(--c1);
  white-space:nowrap;
  overflow:hidden;
  transform:skew(var(--s,15deg));
}
.box span:before{
  content:var(--text);
  display:inline-block;
  margin-left:50px; /*Same value as left on the span*/
  transform:skew(calc(-1 * var(--s,15deg)));
}
<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:70%;--s:45deg">
<span></span>
</div>

我们还可以考虑多行文字：

:root {
  --c1:#adf175;
  --c2:#f3f3f3;
}
.box {
  font-size: 20px;
  font-family: Verdana, sans-serif;
  color:var(--c1);
  background-color:var(--c2);
  padding:20px;
  position:relative;
  display:inline-block;
  overflow:hidden;
  --w:140px;
  width:var(--w); /*we fix the width to have multiple lines*/
}
.box:before {
  content:var(--text);
}
.box span {
  position:absolute;
  top:0;
  left:-50px;
  right:var(--p,50%);
  bottom:0;
  padding:inherit;
  color:var(--c2);
  background-color:var(--c1);
  overflow:hidden;
  transform:skew(var(--s,15deg));
}
.box span:before{
  content:var(--text);
  width:var(--w); /* we use the same width as the box*/
  display:inline-block;
  margin-left:50px; /*Same value as left on the span*/
  transform:skew(calc(-1 * var(--s,15deg)));
}
<div class="box" style="--text:'Lorem Ipsum dolert text'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:40%;--s:45deg">
<span></span>
</div>

答案 3 :(得分：1)

因此，可以使用<path color="#1b8f00" d="M80 80 A45 45,0,0,0,125 125L125 80ZM30 20 A25 25,0,1,0,45 25L45 30Z" /> 完成此操作-尽管不受普遍支持，但它确实适用于最新的Chrome，Firefox和Edge：

background-clip: text
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.rotate {
  border: 1px solid #ddd;
  text-align: center;
  background: linear-gradient(75deg, #adf175 50%, transparent 50%);
  transform: rotate(-90deg);
}

.text {
  font-family: arial, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  padding: 5px;
  margin: 0;
  text-transform: uppercase;
  background: linear-gradient(75deg, #fff 50%, #adf175 50%);
  color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

.fit-text {
  font-size: 2.25rem;
}

此解决方案包括旋转结果并扩展最后一个单词以适合（示例图像的外观）-我也提供了非扩展版本。

相关问题
最新问题