<!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;
}
大家好,我尝试根据其他div的背景更改类别为fixed-background
的div的背景和颜色。我碰到了mix-blend-mode
CSS属性,但是它似乎不起作用。
我到目前为止还没有CSS专家,有人可以帮助我完成这项工作吗?如果我将其与JS函数一起使用,我不会感到不满意。
答案 0 :(得分:1)
我一直在玩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>
答案 1 :(得分:0)
您需要将这些CSS类放在另一个名为style.css的文件中,并且还需要像这样设置bg颜色。
.background1{
background-color:red;
}