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或其他任何内容更改徽标的颜色。

您是否考虑过更简单的解决方案？比如给徽标一个黑色的轮廓，以便它在白色背景上突出？

Answer 2

$(document).ready(function(){ $('#firstDiv > div:not(.itemName):not(.exitContainer)').remove(); });中的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="firstDiv"> <div class="itemName">1</div> <div class="exitContainer">2</div> <div id="secondDiv"> <div class="itemName">3</div> <div class="exitContainer">4</div> </div> <div id="thirdDiv"> <div class="itemName">5</div> <div class="exitContainer">6</div> </div> </div>属性用于填充fill的颜色。

CSS

但是，您无法更改网站特定部分的徽标颜色。

Answer 3

我检查你的演示链接，我发现他们使用jquery来添加和删除徽标中的css类。所以你需要添加jquery 2.3。+ 通过添加该元素的#main及其高度来获取offset元素底部的值，将其设置为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');
   }

我为你做的demo on codepen希望这会对你有帮助。

当我滚动到不同的背景颜色时，如何使用CSS来改变徽标的颜色

3 个答案: