根據當前背景更改固定div的背景

當您在屏幕的側面滾動時，我得到了一個固定的div，我想根據它的當前背景更改它的背景。因此，例如，當DIV是在白色背景上它的設置background-color: gray，當其在灰色背景上這將是background-color: white根據當前背景更改固定div的背景

此外，我想它的時候，你sroll對另一背景顏色，而不是一個按鈕改變顏色您在嘗試更改顏色時需要點擊。

我做了一個小例如到這裏：

.background1{ 
 
    background-color: #777777; 
 
    height: 300px; 
 
    width: 100%; 
 
    padding: 50px 200px; 
 
    box-sizing: border-box; 
 
} 
 

 
.background2{ 
 
    background-color: #444444; 
 
    height: 300px; 
 
    width: 100%; 
 
    padding: 50px 200px; 
 
    box-sizing: border-box; 
 
} 
 

 
.background3{ 
 
    background-color: #dddddd; 
 
    height: 300px; 
 
    width: 100%; 
 
    padding: 50px 200px; 
 
    box-sizing: border-box; 
 
} 
 

 
.background4{ 
 
    background-color: #bbbbbb; 
 
    height: 300px; 
 
    width: 100%; 
 
    padding: 50px 200px; 
 
    box-sizing: border-box; 
 
    margin-bottom: 500px; 
 
} 
 

 
.example-color1{ 
 
    color: white; 
 
    font-weight: bold; 
 
    background-color: #444444; 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 10px; 
 
} 
 

 
.example-color2{ 
 
    color: white; 
 
    font-weight: bold; 
 
    background-color: #cccccc; 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 10px; 
 
} 
 

 
.example-color3{ 
 
    color: white; 
 
    font-weight: bold; 
 
    background-color: #666666; 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 10px; 
 
} 
 

 
.example-color4{ 
 
    color: white; 
 
    font-weight: bold; 
 
    background-color: #999999; 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 10px; 
 
} 
 

 
.fixed-background{ 
 
    position: fixed; 
 
    top: 55px; 
 
    left: 30px; 
 
    background-color: white; 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 1px black solid; 
 
    padding: 10px; 
 
}

<div class="background1"><div class="example-color1">For example this color on this block</div></div> 
 
<div class="background2"><div class="example-color2">For example this color on this block</div></div> 
 
<div class="background3"><div class="example-color3">For example this color on this block</div></div> 
 
<div class="background4"><div class="example-color4">For example this color on this block</div></div> 
 
<div class="fixed-background">This should change color based on background</div>

來源

2017-05-11 Minegolfer

（[基於一些其他分區的背景顏色的div更改背景顏色]的可能的複製http://stackoverflow.com/questions/20322129/changing- background-color-of-a-div-based-on-background-color-of-some-other-div） –

@ArjanKnol我希望找到一種方法，我不必使用JQuerry – Minegolfer

你可以使用透明但你不會得到這些預期的結果。 '背景：rgba（0,0,0,0.5）;'。我不認爲有其他方式只能用CSS來完成。 – Huelfe

添加某種過濾器（查看所有過濾器here），並用不透明背景做了工作。

.fixed background{ 
    background-color: RGBA(0,0,0,0.5); 
    filter: hue-rotate(90deg); 
}

摸索出相當不錯的：d

來源

2018-01-30 10:03:27 Minegolfer

根據當前背景更改固定div的背景

回答

相關問題