根据背景更改文本的颜色
[英]Changing color of text depending on the background
问题描述
在我的网站上，我有一个粘性导航栏和3个单独的部分。 我想根据背景更改导航中文本的颜色。 因此，当背景为黑色时，导航栏中的文本将为白色。 我认为这在JS中是可能的，但是我只看到了一些CSS解决方案，这些解决方案对我来说效果不佳。 有可能做到吗？ ：/
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>
1 个解决方案
解决方案1
0
我的建议是通过跟踪滚动位置来使用某些滚动顶部方法。 每当窗口到达某个滚动位置时，使用此数据即可更改文本的颜色。
这是来自w3schools的一个简单示例
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll2
希望这对您有所帮助！
有没有办法根据 CSS 中另一个元素的背景颜色来更改文本的颜色？
[英]is there a way to change the color of the text depending on the background color of another element in CSS?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.