根據背景更改顏色

Question

我已經看到了一些示例，但是我正在努力實現它，如何使該箭頭根據背景改變顏色？ 所以無論是白色還是黑色。

 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); }); } 

 * { 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; } 

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

Answer 1

因此，要解決您的情況，我建議您添加半透明的白色背景（不透明度為50％的白色），這樣可以解決問題。

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