根据背景更改固定定位div的背景和字体颜色

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="background1">Div1</div>
    <div class="background2">Div2</div>
    <div class="background3">Div3</div>
    <div class="background4">Div4</div>
    <div class="fixed-background">This should change color based on background</div>

</body>
</html>




div {
    height: 100vh;
}

.background1 {
    background: gray;
}

.background2 {
    background: black;
}

.background3 {
    background: blue;
}

.background4 {
    background: tomato;
}

.fixed-background {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
    mix-blend-mode: difference;
}

Hello everybody, I try to change the background and color of the div with class fixed-background based on the background of the other div.大家好，我尝试根据另一个div的背景更改带有class fixed-background的div的背景和颜色。 I came across the mix-blend-mode CSS property, but it seems not to work.我遇到了mix-blend-mode CSS 属性，但它似乎不起作用。

I´m by far no CSS Expert, can anyone help me to get this working?我到目前为止还不是 CSS 专家，有人能帮我解决这个问题吗？ I would not be unhappy if I get it working with a JS function.如果我让它与 JS 函数一起工作，我不会不高兴。

Answer 1

I've been playing around with mix-blend-mode and maybe I've got what you need.我一直在玩mix-blend-mode ，也许我有你需要的东西。 Check it, please.请检查一下。 An important thing is you have to check compatibility with browsers.重要的是您必须检查与浏览器的兼容性。

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

 body { margin-bottom: 50vh; } .background1, .background2, .background3, .background4 { height: 50vh; } .background1 { background: gray; } .background2 { background: black; } .background3 { background: blue; } .background4 { background: tomato; } .fixed { position: fixed; top: 10px; right: 10px; width: 100px; height: 100px; mix-blend-mode: screen; } .fixed-text { background: green; color: maroon; mix-blend-mode: difference; z-index: 3; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

 <div class="background1">Div1</div> <div class="background2">Div2</div> <div class="background3">Div3</div> <div class="background4">Div4</div> <div class="fixed"> <div class="fixed-text"> This should change color based on background </div> </div>

Answer 2

You need to have those css classes in another file named style.css And also you need to set the bg colour like this.您需要将这些 css 类放在另一个名为 style.css 的文件中，并且您还需要像这样设置 bg 颜色。

.background1{
    background-color:red;
}

根据背景更改固定定位div的背景和字体颜色

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-03-24 17:27:53

解决方案2
0 2020-03-24 16:29:06

根据背景更改固定定位div的背景和字体颜色

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-03-24 17:27:53

解决方案2 0 2020-03-24 16:29:06

解决方案1
1 已采纳 2020-03-24 17:27:53

解决方案2
0 2020-03-24 16:29:06