在我的html頁面的每個div中更改徽標

我有5個div，每個div在主容器div下面。每個div有不同的高度（例如，第一個div有height: 300px;，第二個有height: 400px;等等）。這些div中的每一個都具有黑色/白色的替代背景色。在我的html頁面的每個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/

來源

2014-02-24 ketan

請提供一個js小提琴.. –

'document.querySelectorAll（「div」）;'？ –

你能演出一個小提琴嗎？此外，除了更改徽標以外，您還試過了什麼？[從黑色到白色，反之亦然]？ – Fr0zenFyr

嗯，試試這個使用簡單的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大小。此外，使用小圖像，而不是加載巨大的圖像和調整大小，它會節省帶寬和加載時間。

來源

2014-02-24 06:47:05 Fr0zenFyr

謝謝你的回答，它是正確的。但我有一個div背景的畫布，所以div背景圖像不顯示。 – ketan

你是怎麼畫畫布的？嘗試看看[這個SO回答]（http://stackoverflow.com/questions/8696476/image-doesnt-show-up-on-canvas/8696591#8696591）一開始。 – Fr0zenFyr

好的我得到了解決方案。別擔心。再次感謝您的回答。 – ketan

難道這是一個辦法：

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

來源

2014-02-24 06:25:00 LGSon

對不起，但它同時顯示所有徽標。我需要修復標誌。在屏幕的左上方。像這樣http://jsfiddle.net/ketan156/KqWQg/1/ – ketan

這篇文章可能會給你一個開始的方法：http://stackoverflow.com/questions/16444783/change-color-of-fixed-image-after滾動 – LGSon

一個解決方案一個大的，它不是理想的解決方案你之後，但它將使雙方的標誌可見背景是在徽標圖像上添加一個純白色的筆觸，例如在Photoshop中。或者，如果您願意，可以在徽標的白色版本中添加黑色筆觸。

來源

2014-02-24 06:40:25 partypete25

我嘗試這個，但它在我的網站看起來不好。 – ketan

是否必須是黑色/白色？如果你讓圖像變得灰暗和半透明，會怎樣？所以它看起來更像一個水印。 – partypete25

在我的html頁面的每個div中更改徽標

回答

相關問題