基于背景颜色的文本颜色
我想制作一个文本的div，它会根据它周围的背景颜色改变颜色。 div中的颜色将在2种不同的颜色之间变化，我希望文本颜色与这些颜色相反。 所以当背景是白色时文本是黑色的而背景是黑色时文本是白色的。 我目前使用的是“混合混合模式”，但我无法在背景颜色更改之前将初始文本颜色设置为背景颜色的对立面。 当我说颜色会改变时，这是我的意思。 这不会是一个像这样的加载栏类型的变化，但你明白了。 这里还有一个来自我的模型的图像。 它横向，因为文本将在页面上横向。
HTML：
<div class="wrapper">
<div class="bg">
<div class="el"></div>
</div>
</div>
CSS：
.wrapper {
background-color: rgb(242, 222, 183);
}
$loadingTime: 3s;
$color: rgb(165, 76, 70);
@keyframes loading {
0% {
width: 0%;
} 100% {
width: 100%;
}
}
@keyframes percentage {
@for $i from 1 through 100 {
$percentage: $i + "%";
#{$percentage} {
content: $percentage;
}
}
}
.bg {
background-color: $color;
animation: loading $loadingTime linear infinite;
}
.el{
color: $color;
width: 200px;
border: 1px solid $color;
&:after {
padding-left: 20px;
content: "0%";
display: block;
text-align: center;
font-size: 50px;
padding: 10px 20px;
color: rgb(242, 222, 183);
mix-blend-mode: initial;
animation: percentage $loadingTime linear infinite;
}
}
html {
height: 100%;
background-color: white;
font-family: 'PT Sans', sans-serif;
font-weight: bold;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}