Question

我看过一些例子，但我正在努力实现它，如何根据背景使这个箭头改变颜色？无论是白色还是黑色。

＆＃13;

if ($('#back-to-top').length) {
  var scrollTrigger = 100, // px
    backToTop = function() {
      var scrollTop = $(window).scrollTop();
      if (scrollTop > scrollTrigger) {
        $('#back-to-top').addClass('show');
      } else {
        $('#back-to-top').removeClass('show');
      }
    };
  backToTop();
  $(window).on('scroll', function() {
    backToTop();
  });
  $('#back-to-top').on('click', function(e) {
    e.preventDefault();
    $('html,body').animate({
      scrollTop: 0
    }, 700);
  });
}

＆＃13;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-weight: 500;
  font-family: 'HelveticaNeue';
}

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #373B44;
  height: 100vh;
  &:nth-of-type(2n) {
    background-color: #FE4B74;
  }
}

.intro {
  height: 90vh;
}

.content {
  display: table-cell;
  vertical-align: middle;
}

h1 {
  font-size: 3em;
  display: block;
  color: white;
  font-weight: 300;
}

p {
  font-size: 1.5em;
  font-weight: 500;
  color: #C3CAD9;
}

a {
  font-weight: 700;
  color: #373B44;
  position: relative;
  &:hover {
    opacity: 0.8;
  }
  &:active {
    top: 1px;
  }
}

footer {
  padding: 1% 5%;
  text-align: center;
  background-color: #373B44;
  color: white;
  a {
    color: #FE4B74;
    font-weight: 500;
    text-decoration: none;
  }
}

#back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 9999;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 30px;
  color: #444;
  cursor: pointer;
  border: 0;
  border-radius: 2px;
  text-decoration: none;
  transition: opacity 0.2s ease-out;
  opacity: 0;
}

#back-to-top:hover {
  background: #e9ebec;
}

#back-to-top.show {
  opacity: 1;
}

#content {
  height: 2000px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<a href="#" id="back-to-top" title="Back to top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a>
<section class="intro">
  <div class="content">
    <h1>You can create full screen sections without javascript.</h1>
    <p>The height is set to 90vh, that means 90% height.</p>
  </div>
</section>

<section>
  <div class="content">
    <h1>Resize your browser and see how they adapt.</h1>
  </div>
</section>

<section>
  <div class="content">
    <h1>It's amazing and fast.</h1>
  </div>
</section>

<section>
  <div class="content">
    <h1>See the <a href="http://caniuse.com/#feat=viewport-units">browser support.</a></h1>
  </div>
</section>

<footer>
  Made by <a href="https://www.twitter.com/ckor">@ckor</a>
</footer>

＆＃13;

Answer 1

所以为了对抗你的情况，我建议你添加一个半透明的白色背景（白色，不透明度为50％），这样就可以了。

background-color: rgba(255,255,255,0.5);

根据背景改变颜色

1 个答案: