文字混合在背景色上 [英] Text blended over background color
问题描述
我正在尝试设置如下所示的进度条:
I'm trying to style a progress bar which looks like this:
左边部分可以有不同的颜色(绿色,橙色等),我希望文本根据下面的背景更改颜色.理想情况下,在浅灰色右侧部分上应为黑色/深灰色(如示例中所示),当左侧部分较浅时应为黑色/深灰色,而当左侧较暗时应为白色(如示例中的白色).在示例中为绿色).
The left part can have different colors (green, orange, etc) and I want the text to change color according to the background underneath. Ideally, it should be black/dark-grey over the light-grey right part (like in the example), same black/dark-grey when the left part is rather light, and white when the left part is rather dark (like the green in the example).
我尝试了各种mix-blend-mode: difference
和color
组合,但无法实现.
裸露示例此处
我也尝试过filter: grayscale(1) contrast(9);
I tried various mix-blend-mode: difference
and color
combinations, couldn't achieve this.
Bare example here
I tried also something along filter: grayscale(1) contrast(9);
.container {
width: 200px;
height: 20px;
position: relative;
background-color: #eee;
text-align: center;
}
.progress {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #43a047;
}
.text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: difference;
color: white;
}
<div class="container">
<div class="progress"></div>
<div class="text">Some text here</div>
</div>
推荐答案
您可以创建另一个渐变来为文本着色,而无需使用混合混合模式:
You can create another gradient to color the text without the use of mix-blend mode:
.container {
width: 200px;
height: 20px;
background: linear-gradient(to right, #43a047 50%, #eee 0) no-repeat;
text-align: center;
}
.text {
background: linear-gradient(to right, white 50%, black 0) no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
<div class="container">
<div class="text">Some text here</div>
</div>
为了获得更好的灵活性,您可以使用CSS变量来控制进度:
And for better flexibility you can use CSS variable to control the progress:
.container {
width: 200px;
height: 20px;
background: linear-gradient(to right, #43a047 var(--p,50%), #eee 0) no-repeat;
text-align: center;
}
.text {
background: linear-gradient(to right, white var(--p,50%), black 0) no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
<div class="container" style="--p:80%">
<div class="text">Some text here</div>
</div>
<div class="container" style="--p:20%">
<div class="text">Some text here</div>
</div>
<div class="container">
<div class="text">Some text here</div>
</div>
这篇关于文字混合在背景色上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!