Инвертировать цвета заголовка над изображением - PullRequest
Новая
       1

Инвертировать цвета заголовка над изображением

1 голос
/ 09 октября 2019

Вот мой текущий HTML: 

.titleText {
  font-family: Hacked;
  font-size: 8rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
}

.titleContainer {
  position: relative;
}

body {
  margin: 0;
}
<!DOCTYPE html>
<div class="titleContainer">
  <img src="assets/ethan.png">
  <h1 class="titleText">Ethan Brand</h1>
</div>

Я хочу, чтобы текст поверх изображения был "противоположностью прозрачности", инвертируя цвет позади каждого пикселя текста. Я нашел это: Как я могу инвертировать цвет с помощью CSS? , но это меняет весь текст, не принимая инверсию каждого пикселя.

Спасибо!

1 Ответ

0 голосов
/ 09 октября 2019

Используйте mix-blend-mode: difference; с color: white в тексте: 

.titleText {
  font-family: Hacked;
  font-size: 8rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
  mix-blend-mode: difference;
  color: white;
  margin: 0;
}

.titleContainer {
  position: relative;
}

body {
  margin: 0;
}
<div class="titleContainer">
  <img src="https://picsum.photos/800/400">
  <h1 class="titleText">Ethan Brand</h1>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...