反转彩色文本相关背景 [英] Invert colored text related background
问题描述
我想根据文本背景来反转文本颜色,如下图所示:.
I want to invert text color based on the background of the text, like in this image: .
所以我尝试了以下代码,但是没有用:
So I've tried the following code, but it didn't work:
#warp,
#text,
#tri {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
z-index: 1;
}
#warp {
background-color: orange;
}
#text {
text-align: center;
z-index: 3;
}
#text h1 {
margin: 0;
line-height: 150px;
mix-blend-mode: difference;
}
#tri {
background-color: black;
clip-path: polygon(0 0, 0 100%, 99.8% 150px);
-webkit-clip-path: polygon(0 0, 0 100%, 99.8% 150px);
z-index: 2;
}
<div id="warp">
<div id="text">
<h1>TEXT</h1>
</div>
<div id="tri"></div>
</div>
我发现了有关background-image
&文本倒排,但我不知道如何使用DIV.
I found some results about background-image
& inverted text, but I don't know how to do it with DIVs.
推荐答案
如果仅将相同的文本添加到tri
层,则它的工作原理是:
If you just add the same text to the tri
layer, it works:
编辑:为了允许选择文本,我添加了另一个透明层,该透明层将所有文本包装为一个单元.但是,它确实使更新更具重复性.作为解决方案,我添加了附加的JavaScript代码(不必要).
Edit: In order to allow selecting the text, I've added another transparent layer that wraps all the text as one unit. It does, however, makes updates more repetitive. As a solution, I've added the attached JavaScript code (which isn't necessary).
var text = "TEXT";
var textElements = document.getElementsByTagName("h1");
for (var i=0; i<textElements.length; i++) {
textElements[i].innerHTML = text;
}
#warp,
#text,
#tri,
#selectable {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
}
#warp {
background-color: orange;
}
#text {
text-align: center;
z-index: 1;
}
h1 {
margin: 0;
line-height: 150px;
mix-blend-mode: difference;
}
#tri {
background-color: black;
clip-path: polygon(0 0, 0 100%, 99.8% 150px);
-webkit-clip-path: polygon(0 0, 0 100%, 99.8% 150px);
z-index: 2;
color: blue;
text-align: center;
}
#selectable {
text-align: center;
z-index: 5;
color: transparent;
}
<div id="warp">
<div id="text">
<h1>TEXT</h1>
</div>
<div id="tri">
<h1>TEXT</h1>
</div>
<div id="selectable">
<h1>TEXT</h1>
</div>
</div>
这篇关于反转彩色文本相关背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!