在我的html页面的每个div更改徽标 [英] change logo in every div of my html page

问题描述

我有5个div，每个在主容器div下面。每个div有不同的高度（比如，第一个有 height：300px; ，第二个有 height：400px; 等等）。每个div也有一个黑色/白色的替代背景颜色。

I have 5 div, each below the other in a main container div. Each div has a different height(say, first one has height: 300px;, second one has height: 400px; and so on). Each of these div also has an alternative background color of black/white.

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

I have a logo, one variant is white color and the other is black color which I want at a fixed position when page scrolls(white logo on a black div and black logo on white div).

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

In my code I placed a black logo at top left corner. Now my problem starts here. When I scroll the page, the black logo is not visible on black div, the same would happen when I have a white div and white logo.

div显示白色标志，白色div在页面滚动时显示黑色标志。位置应该是固定的。

I want that the black div show the white logo and white div show a black logo when the page is scrolled. The position should be fixed.

这是我的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/

I created a JSfiddle: http://jsfiddle.net/ketan156/KqWQg/1/

推荐答案

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： [对不起图片大小不匹配，我想你可以处理]

CSS:[sorry for image size mismatch, I guess you can handle that yourself.]

.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这里。

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

Note: I used some random DIV sizes as suggested by OP. Also, use small images instead of loading huge images and resizing them, it will save bandwidth and load time.

这篇关于在我的html页面的每个div更改徽标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！