根据背景改变文本的颜色

时间：2018-02-09 00:58:20

标签： javascript jquery html css twitter-bootstrap

在我的网站上，我有一个粘性导航栏和3个独立的部分。我想根据背景更改导航中文本的颜色。因此，当背景为黑色时，导航中的文本将为白色。我认为它在JS中是可能的，但我看到了一些只有CSS的解决方案，这对我来说效果不佳。是不是有可能做到这一点？ ：/

＆＃13;
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我的建议是通过跟踪滚动位置来使用一些滚动顶部方法。只要窗口到达某个滚动位置，就可以使用此数据更改文本的颜色。

这是w3schools的一个简单例子

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

希望这有帮助！

相关问题
最新问题