javascript - 如何根据背景颜色轻松反转文本颜色

Question

我真的是 JavaScript 的新手，但我认为这也是我必须恢复的东西。我从 Bootstrap 中获得了这个导航栏:

<div class="navbar navbar-fixed-top">
  <nav class="navbar navbar-expand-lg navbar-dark" style="background-color:mix-blend-mode: difference;font-weight: bold">
    <a class="navbar-brand" href="#">
      <img src="logo.png" width="30" height="30" alt="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="index.html">Home<span class="sr-only">(current)</span></a>
      </div>
      <div class="navbar-nav">
        <a class="nav-item nav-link" href="#about">About ATCN<span class="sr-only">(current)</span></a>
      </div>
      <div class="navbar-nav">
        <a class="nav-item nav-link" href="#download">Download<span class="sr-only">(current)</span></a>
      </div>
    </div>
  </nav>
</div>

我希望发生的是，只要文本位于白色背景上，文本颜色就会反转。

我看过很多关于此的帖子，但没有一个使用 Bootstrap ，或者它们是极其复杂的 JavaScript 脚本。有人可以帮我吗？

Answer 1

将其添加到 styles.css 中的类 .navbar-fixed-top 第 (1) 行

background-color: #0000004d;

整个类应该是这样的:

.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
    background-color: #0000004d;
}

希望我有所帮助!