javascript - 当我滚动到不同的背景颜色时，如何使用 CSS 更改 Logo 的颜色

Question

我目前使用的是白色 SVG Logo ，因为我的网站大部分是深色背景。但是，我确实有一个白色部分，因此我希望在滚动白色部分时将 Logo 的颜色更改为黑色。

这是 Logo 代码和白色部分的副本:

<!-- 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 页面中。

假设您进行了该更改，那么您可以向页面添加一个滚动事件处理程序并观察 Logo 的位置。如果您检测到它在页面上的正确位置(即在白色部分上方)，那么您可以向它添加一个类(或 <a> 或 <div> )。该类将使用 fill: black 更改 Logo 的颜色，或其他。

您是否考虑过更简单的解决方案？比如给logo画一个深色的轮廓，让它在白色背景上显得突出？