根据背景更改文本的颜色

Question

On my website I have one sticky navbar and 3 separated sections. 在我的网站上，我有一个粘性导航栏和3个单独的部分。 I would like to change the color of the text in the nav depending on the background. 我想根据背景更改导航中文本的颜色。 So when background is black then the text in the nav will be white. 因此，当背景为黑色时，导航栏中的文本将为白色。 I think it will be possible in JS, but I saw some only CSS solutions, which didn't worked well for me. 我认为这在JS中是可能的，但是我只看到了一些CSS解决方案，这些解决方案对我来说效果不佳。 Is it somehow possible to do it? 有可能做到吗？ :/ ：/

 html, body { width: 100%; } h1 { font-size: 60pt !important; font-family: 'Cinzel Decorative', cursive !important; margin-left: 20px; } p { font-size: 13pt !important; font-family: 'Cinzel', serif; } a { text-decoration: none !important; color: #ccc !important; } /* Logo */ .logo { height: 202px; } /* NavBar */ nav { font-size: 18pt; font-family: 'Cinzel', serif; } .nav_text:hover { border-bottom: 2px solid white; margin-bottom: -2px; } .nav-link { margin: 0 20px 0 20px; padding: 0 !important; color: #fff !important; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; float: right; } .container { z-index: 2000 !important; max-width: 144.45px !important; margin-right: 20px !important; } nav ul { display: block; position: relative; list-style: none; padding-top: 14px !important; } .fixed-nav { position: absolute; top: 230px; right: -20px; left: 0; z-index: 1030; } .sticky-nav { position: absolute; top: 0; z-index: 1020; right: 0; left: 50px; } /* Sections */ section { color: white; height: 100.2vh; min-height: 900px; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: -1; } .first_section { margin-top: -254px; padding-top: 254px; } .header-positon { padding-top: 40%; } .replic-positon { padding-top: 30%; } .unic-positon { padding-top: 5%; } .section_text { padding: 20px; margin-top: -30px; } .red { background: rgba(232, 0, 40, 0.3); } .green { background: rgba(32, 62, 85, 0.3); } .purple { background: rgba(43, 0, 81, 0.3); } @media only screen and (min-width: 440px) { /* styles for browsers larger than 440px; */ .header-positon { padding-top: 10%; } } @media only screen and (min-width: 555px) { /* styles for browsers larger than 555px; */ .container { max-width: 429.642px !important; } nav ul { display: block; position: relative; } .sticky-nav { position: fixed; top: 0; z-index: 1020; } .fixed-nav { position: -webkit-sticky; position: sticky; top: 98px; left: 0; right: 0; } .dropdown { display: block; } } @media only screen and (min-width: 768px) { /* default iPad screens */ h1 { margin-left: 0; } } @media only screen and (min-width: 945px) { /* styles for browsers larger than 555px; */ .login-item { display: none; } .container { max-width: 681.217px !important; } .nav-link { float: none; } nav ul { display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; position: static; } .fixed-nav { top: 57px; left: 0; } } @media only screen and (min-width: 1325px) { /* styles for browsers larger than 1325px; */ .logo { margin-left: auto; margin-right: auto; } .container { max-width: 661.217px !important; margin-right: auto !important; } .contact-item { margin-right: 0 !important; } .sticky-nav { position: -webkit-sticky; position: sticky; left: 0; } .fixed-nav { position: fixed; top: 0; left: 0; } } @media only screen and (min-width: 1440px) { /* styles for browsers larger than 1440px; */ h1 { font-size: 90pt !important; } .nav-link { margin: 0 32px 0 32px; } .container { max-width: 751.217px !important; } .section_text { margin-top: -43px; } } @media only screen and (min-width: 1900px) { /* for sumo sized (mac) screens */ h1 { font-size: 120pt !important; } .nav-link { margin: 0 63px 0 63px; } .container { max-width: 1005.22px !important; } .section_text { margin-top: -55px; } }

 <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> <title>Test</title> </head> <body> <main class="container-fluid p-0 m-0"> <img class="logo d-block pt-0 mt-0 pb-0 mb-0" src="http://brandmark.io/logo-rank/random/pepsi.png" alt="Logo" /> <nav class="container sticky-nav p-0"> <ul class="m-0 pl-0" id="navbar"> <li class="nav-item"> <a class="nav-link ml-0" href="#Home"><span class="nav_text">Home</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#Replic"><span class="nav_text">Repliky</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#Unique"><span class="nav_text">Unikáty</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#Installation"><span class="nav_text">Instalace</span></a> </li> <li class="nav-item"> <a class="nav-link contact-item" href="#Contacts"><span class="nav_text">Kontakt</span></a> </li> <li class="nav-item login-item"> <a class="nav-link" href="#Login"><span class="nav_text">Login</span></a> </li> </ul> </nav> <section class="first_section" style="background-image: url('https://picsum.photos/1920/1080/?random'); "> <div class="row header-positon no-gutters"> <div class="col-xs-12 col-md-4 offset-md-1" data-aos="fade-right"> <h1>Us</h1> <p class="section_text green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p> </div> </div> </section> <section style="background-image: url('https://picsum.photos/1920/1080/?random'); "> <div class="row replic-positon no-gutters" data-aos="fade-left"> <div class="col-xs-12 col-md-4 offset-md-7"> <h1>Replic</h1> <p class="section_text red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p> </div> </div> </section> <section style="background-image: url('https://picsum.photos/1920/1080/?random'); "> <div class="row unique-positon no-gutters" data-aos="fade-up"> <div class="col-xs-12 col-md-4 offset-md-1"> <h1>Unique</h1> <p class="section_text purple">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ex inventore vel error quibusdam animi fugiat, doloribus dolores consectetur nulla deleniti sint blanditiis quod debitis quis vitae officiis tempora numquam.</p> </div> </div> </section> </main> </body> </html>

Answer 1

My suggestion would be to use some scroll top method by tracking the scroll location. 我的建议是通过跟踪滚动位置来使用某些滚动顶部方法。 Use this data to change the color of the text whenever the window reaches a certain scroll position. 每当窗口到达某个滚动位置时，使用此数据即可更改文本的颜色。

Here is a simple example from w3schools 这是来自w3schools的一个简单示例

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll2 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll2

Hope this helped! 希望这对您有所帮助！

根据背景更改文本的颜色

问题描述

1 个解决方案

解决方案1
0

根据背景更改文本的颜色

问题描述

1 个解决方案

解决方案1 0

解决方案1
0