Изменение цвета текста относительно цвета фона с помощью режима наложения CSS3

Question

Я пытаюсь установить цвет ссылки таким образом, чтобы она автоматически настраивала свой цвет по сравнению с цветом фона. Я искал эту проблему и обнаружил, что это можно сделать с помощью blend-mode или background-blend-mode. Я пытаюсь, но не могу сделать то же самое. Вот мой код HTML и CSS.

.full-section {
  min-height: 100vh;
}

.bg-black {
  background-color: #000;
}

.bg-white {
  background-color: #fff;
}

.bg-gray {
  background-color: #e3e3e3;
}

.top-nav {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  zindex: 5;
  overflow: hideen;
  background-color: transparent;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.all-center {
  align-items: center;
  justify-content: center;
}

.align-end {
  justify-content: flex-end;
}

.logo {
  color: #fff;
  text-decoration: none;
  mix-blend-mode: difference;
}

.button {
  background-color: #fff;
  color: #000;
  text-decoration: none;
  width: 180px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: difference;
  background-blend-mode: difference;
}

.button:hover {
  background-color: #000;
  color: #fff;
  text-decoration: none;
}

<div class="row top-nav flex all-center">
  <div class="col-md-3">
    <a href="#" class="logo">Logo</a>

  </div>
  <div class="col-md-9 flex align-end">
    <a href="#" class="button">Contact Us</a>
  </div>
</div>
<div class="row full-section bg-black">
</div>
<div class="row full-section bg-white">
</div>
<div class="row full-section bg-gray">
</div>
</div>

Answer 1

.full-section {
  min-height: 100vh;
}

.bg-black {
  background-color: #000;
}

.bg-white {
  background-color: #fff;
}

.bg-gray {
  background-color: #e3e3e3;
}

.top-nav {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  zindex: 5;
  overflow: hideen;
  background-color: transparent;
  mix-blend-mode: difference;

}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.all-center {
  align-items: center;
  justify-content: center;
}

.align-end {
  justify-content: flex-end;
}

.logo {
  color: #fff;
  text-decoration: none;
  mix-blend-mode: difference;
}

.button {
  background-color: #fff;
  color: #000;
  text-decoration: none;
  width: 180px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  font-family: sans-serif;
}

.button:hover {
  background-color: #000;
  color: #fff;
  text-decoration: none;
}

<div class="row top-nav flex all-center">
  <div class="col-md-3">
    <a href="#" class="logo">Logo</a>

  </div>
  <div class="col-md-9 flex align-end">
    <a href="#" class="button">Contact Us</a>
  </div>
</div>
<div class="row full-section bg-black">
</div>
<div class="row full-section bg-white">
</div>
<div class="row full-section bg-gray">
</div>
</div>

Answer 2

Вы также можете взглянуть на filter () , он также позволяет переход:

Обратите внимание на то, как эти два работают через разные браузеры:

• https://caniuse.com/#feat = css -фильтры

• https://caniuse.com/#feat = mdn-css_properties_mix-blend-mode

---

filter () возможный пример:

.full-section {
  min-height: 100vh;
}

.bg-black {
  background-color: #000;
}

.bg-white {
  background-color: #fff;
}

.bg-gray {
  background-color: #e3e3e3;
}

.top-nav {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  z-index: 5;
  overflow: hideen;
  background-color: transparent;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.all-center {
  align-items: center;
  justify-content: center;
}

.align-end {
  justify-content: flex-end;
}

.logo {
  color: #fff;
  text-decoration: none;
  mix-blend-mode: difference;
}

.button {
  background-color: #fff;
  color: #000;
  text-decoration: none;
  width: 180px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:0.5s;
}

.button:hover {
  filter:invert(100%);
  text-decoration: none;
}

<div class="row top-nav flex all-center">
  <div class="col-md-3">
    <a href="#" class="logo">Logo</a>

  </div>
  <div class="col-md-9 flex align-end">
    <a href="#" class="button">Contact Us</a>
  </div>
</div>
<div class="row full-section bg-black">
</div>
<div class="row full-section bg-white">
</div>
<div class="row full-section bg-gray">
</div>
</div>