进度条中文字反色
现在有一个进度条，进度条中间有一串文字，当我的进度条覆盖了文字之后，文字要去进度条反色
mix-blend-mode
使用 mix-blend-mode: different;，文字颜色为白色，背景容器颜色为 黑色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=\, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.container {
width: 200px;
height: 30px;
border: 1px solid #ccc;
position: relative;
background: #fff;
color: #111;
}
.text {
line-height: 30px;
text-align: center;
color: #fff;
mix-blend-mode: difference;
}
.progress {
position: absolute;
top: 0;
height: 100%;
left: 0;
width: 50%;
background: black;
}
</style>
<body>
<div class="container">
<div class="progress"></div>
<div class="text">hello word</div>
</div>
</body>
</html>使用JS
在文字上面盖一层颜色相反的问题，容器宽度随着进度变大，容器设置 overflow: hidden;
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： 实现一个骰子
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论