Изменить фон и цвет шрифта фиксированного позиционного элемента на основе фона - PullRequest
Новая
       74

Изменить фон и цвет шрифта фиксированного позиционного элемента на основе фона

0 голосов
/ 24 марта 2020 
<!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 функцией.

Ответы [ 2 ]

1 голос
/ 24 марта 2020

Я играл с 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>
0 голосов
/ 24 марта 2020

Вам нужно иметь эти css классы в другом файле с именем style. css А также вам нужно установить цвет bg следующим образом. 

.background1{
    background-color:red;
}
...