根据当前背景更改固定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的背景

回答

相关问题