Fatal编程技术网
  • javascript/
  • Javascript 如何根据背景色轻松反转文本颜色

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

javascript html css web

Javascript 如何根据背景色轻松反转文本颜色,javascript,html,css,web,Javascript,Html,Css,Web,我对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="n

我对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脚本。有人能帮我吗？

将此添加到类中。第1行的styles.css中的navbar fixed top in styles.css

整个类应如下所示：

.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
    background-color: #0000004d;
}
希望我能帮忙

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

请测试这个：

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


你好，世界！！
var mnu=document.getElementById（“mnu”），
dce=document.getElementById（“dseiredColorFullem”），
mC=mnu.style.color；
window.onscroll=函数（）{
if（（dce.offsetTop-window.scrollY mnu.offsetTop））{
var CL=dce.style.backgroundColor，C=[]；
如果（CL.indexOf（“rgb”）==0）{
CL=CL.replace（/\d+/g，函数（N）{var r=（N*1）.toString（16）；C.push（r.length==2？r:“0”+r）；}）；
CL=“#”+C.join（“”）；
}如果（CL.length==4）CL=CL.replace（//g，函数（a）{返回a+a}），substr（1）；
mnu.style.color=CL.replace（/[a-z0-9]{2}/gi，函数（p）{var rt=（255-parseInt（p，16））.toString（16）；返回rt.length==2？rt:“0”+rt；}）；
}else mnu.style.color=mC；
};

这是一个完整的示例，但没有注意引导或代码。您可以在Fiddler或空html文件（带有html标记）中测试它

我希望这有帮助

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

已修复，很抱歉that@GrantMeder您可以使用此css反转悬停时的颜色，但如果希望它根据背景专门更改颜色，则可能需要使用画布元素或某种方法来检测背景颜色，并查看元素是否处于更改颜色的位置。你能给我更多关于你将拥有什么内容以及需要更改什么颜色的详细信息吗？当然，如果更好的话，你可以在这里查看回购：。如果没有，请告诉我，我可以将网站上传到测试服务器上，以显示我正在努力完善的内容。我下载了模板，我明白你的意思，澄清一下，当我滚动到白色背景上时，很难看到菜单项是否正确？@Hassan你的英语很好，说多种语言很难，我可以直接告诉你。如果可以的话，请继续关注，如果您将代码内联而不是作为链接，那么其他人最容易阅读您的问题？？这是一个简单的例子。带有
id='mnu'
的元素是您的菜单。带有
id='dseiredcolorfulelem'
的元素是具有不同颜色的元素。另一个元素是为body创建滚动条。 
<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>