當我滾動到其他背景顏色時，如何使用CSS更改徽標的顏色

Question

我目前使用白色SVG徽標，因為我的網站主要是深色背景。 但是，我確實有一個白色區域，因此我希望在滾動白色區域時將徽標的顏色更改為黑色。

這是徽標代碼和白色部分的副本：

<!-- Logo -->
<div class="logo" style="display: block;">
  <a href="#home"></a> 
</div>

<!-- About -->
<div class="scrollview about">
  <div class="col-sm-3">

  </div>
</div>

這是我目前的風格：

.logo {
   position: fixed;
   top: 0;
   left: 0;
   margin: 20px;
   padding: 2.8em 2.8em;
   z-index: 9;
}
.logo a {
   width: 95px;
   height: 16px;
   display: block !important;
   background-image: url('../img/logo-light.png') transparent 0 0 no-repeat;
   background-image: none,url('../img/logo-light.svg');
}
.about {
  padding: 12.25em 10.25em;
  margin: 0;
  overflow: hidden;
  background: #fff;
  width: 100%;
  height: auto;
  z-index: 3;
}

我不確定是否可以僅使用CSS來完成，但是如果有人甚至可以將我指向插件或腳本，將不勝感激。

謝謝

Answer 1

您不能使用這樣的CSS來更改單獨文件中SVG的樣式。 CSS規則不會跨越文檔邊界。

要設置SVG的樣式，您需要在HTML頁面中內聯它。

假設您進行了更改，則可以向頁面添加滾動事件處理程序，並觀察徽標的位置。 如果您發現它在頁面上的正確位置（即，它位於白色部分上方），則可以向其添加一個類（或<a>或<div> ）。 該類將使用fill: black來更改徽標的顏色fill: black或其他。

您是否考慮過更簡單的解決方案？ 例如給徽標添加深色輪廓，以便在白色背景上突出顯示？

Answer 2

CSS的fill屬性用於填充SVGs的顏色。

svg {
    fill: currentColor;
 }

但是您不能為網站的特定部分更改徽標的顏色。

Answer 3

我檢查了您的演示鏈接，發現它們是使用jquery從那里的徽標中添加和刪除css類的。 因此，您需要添加jquery 2.3。+，通過添加元素的offset及其高度來獲取#main元素底部的值，並將其設置為variable

var mainbottom = $('#main').offset().top + $('#main').height();

現在滾動添加function

$(window).on('scroll',function()

並在其中添加

stop = Math.round($(window).scrollTop());
    if (stop > mainbottom) {
        $('.logo').addClass('logo-dark');
    } else {
        $('.logo').removeClass('logo-dark');
   } 

這是我為您制作的Codepen演示，希望對您有所幫助。