在我的 html 页面的每个 div 中更改徽标

Question

我有 5 个 div，每个在一个主容器 div 中。每个 div 具有不同的高度（例如，第一个具有 height: 300px;，第二个具有 height: 400px; 等等）。这些 div 中的每一个也有黑色/白色的替代背景颜色。

我有一个徽标，一个变体是白色，另一个是黑色，当页面滚动时我想要在固定位置（黑色 div 上的白色徽标和白色 div 上的黑色徽标）。

在我的代码中，我在左上角放置了一个黑色徽标。现在我的问题从这里开始。当我滚动页面时，黑色 div 上看不到黑色徽标，当我有一个白色 div 和白色徽标时也会发生同样的情况。

当页面滚动时，我希望黑色 div 显示白色徽标，白色 div 显示黑色徽标。位置应该是固定的。

这是我的 HTML：

<div class="wrapper">
    <img src="whiteLogo.png" style="position:fixed">
    <div class="first" style="background-color:#000"></div>
    <div class="second" style="background-color:#FFF"></div>
    <div class="thiree" style="background-color:#000"></div>
    <div class="four" style="background-color:#FFF"></div>
    <div class="five" style="background-color:#000"></div>
</div>

我创建了一个 JSfiddle：http://jsfiddle.net/ketan156/KqWQg/1/

Answer 1

请尝试使用简单的 CSS 解决方案，按照您的需要保持它们不变。

HTML：

<div class="wrapper">
  <div class="first black" style="height:300px;"></div>
  <div class="second white" style="height:400px;"></div>
  <div class="thiree black" style="height:500px;"></div>
  <div class="four white" style="height:300px;"></div>
  <div class="five black" style="height:200px;"></div>
</div>

CSS：[抱歉图片大小不匹配，我想你可以自己处理。]

.black{
    background:#000 url(path/to/myWhiteLogo.png) no-repeat 10px 0px fixed;
}
.white{
    background:#FFF url(path/to/myBlackLogo.png) no-repeat 10px 0px fixed;
}

JSFiddle here.

注意：我使用了 OP 建议的一些随机 DIV 大小。此外，使用小图像而不是加载大图像并调整它们的大小，这将节省带宽和加载时间。

Answer 2

有没有办法：

CSS

.black_logo {
    background: url(Black-Logo-PNG.jpg) no-repeat top left;
    background-size: 50px
}

.white_logo {
    background: url(White-Logo-PNG.jpg) no-repeat top left;
    background-size: 50px
}

HTML

<div class="wrapper">
    <div class="first black_logo" style="background-color:#000; height:100px;"></div>
    <div class="second white_logo" style="background-color:#FFF; height:100px;"></div>
    <div class="thiree black_logo" style="background-color:#000; height:100px;"></div>
    <div class="four white_logo" style="background-color:#FFF; height:100px;"></div>
    <div class="five black_logo" style="background-color:#000; height:100px;"></div>
</div>

注意：最好将徽标调整为 50 像素，而不是使用 background-size: 50px 调整大徽标的大小

Answer 3

一种解决方案，它不是您所追求的理想解决方案，但它会使徽标在两个背景上都可见，例如在 Photoshop 中在徽标图像上添加纯白色笔触。或者，如果您愿意，可以在白色版本的徽标中添加黑色笔触。