Question

我真的是JavaScript新手，但是我认为这也是我必须恢复的内容。我有来自引导程序的导航栏：

<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>

我想发生的是，只要文字在白色背景上，文字颜色就会反转。

我已经看过很多关于此的文章，但是他们都没有使用引导程序，或者它们是疯狂复杂的JavaScript脚本。有人可以帮我吗？

Answer 1

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

background-color: #0000004d;

整个类应如下所示：

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

希望我能帮上忙！

Answer 2

对不起；我的空闲时间很短。

请对此进行测试：

<body style="position: relative">
<div style="position: absolute; top:320px; left: 0; height:150px; width:100%; background-color:#000" id="dseiredcolorfulelem"></div>
<div style="position:absolute; top:0; right:0; height:4000px; width:1px"></div>
<div data-menu style="color: #000; display: block; position: fixed; top:0; left: 0" id="mnu">
    <span style="display: inline-block; padding:0px 50px;">Hello World!!</span>
</div>

<script type="text/javascript">
    var mnu = document.getElementById("mnu"),
        dce = document.getElementById("dseiredcolorfulelem"),
        mC = mnu.style.color;
    window.onscroll = function () {
        if ((dce.offsetTop - window.scrollY <= mnu.offsetTop + mnu.clientHeight) && (dce.offsetTop + dce.clientHeight - window.scrollY > mnu.offsetTop)) {
            var CL = dce.style.backgroundColor, C = [];
            if (CL.indexOf("rgb") == 0) {
                CL = CL.replace(/\d+/g, function (N) { var r = (N * 1).toString(16); C.push(r.length == 2 ? r : "0" + r); });
                CL = "#" + C.join("");
            } else if (CL.length == 4) CL = CL.replace(/./g, function (a) { return a + a }).substr(1);
            mnu.style.color = CL.replace(/[a-z0-9]{2}/gi, function (p) { var rt = (255 - parseInt(p, 16)).toString(16); return rt.length == 2 ? rt : "0" + rt; });
        } else mnu.style.color = mC;
    };
</script>

这是一个完整的示例，但没有注意引导程序或您的代码。您可以在提琴手或空白html文件（带有html标记）中对其进行测试。

我希望这会有所帮助。

我修改小提琴和代码。请立即进行测试。

Test Updated Fiddle

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

2 个答案: