@bazliiii

Как изменить текст цвета в зависимости от фона?

Здравствуйте, может кто-то подобное решал, нужно изменить цвет текста в зависимости от фона, например фон темный - цвет текста белый, фон белый - цвет текста черный.
Вот как это должно выглядеть в дизайне:

64ee52e81bad5153266260.png

Изучаю верстку и с таким еще не сталкивался, сайт многостраничный и в дальнейшем хочу попробовать посадить его на WP, поэтому желательно один header и простыми добавлениями классов к нужному пункту в меню не вариант.
Буду рад если кто-то подскажет как такое реализовать, а то гуглил и находил пару вариантов реализации, но они не работали
  • Вопрос задан
  • 1154 просмотра
Пригласить эксперта
Ответы на вопрос 2
Frontend777
@Frontend777
Ubuнтер, php разраб, Wordпрессер, человек
Если вам подойдет использование js, то можно попробовать рассмотреть такой пример:
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="script.js"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Dynamic Text Color</title>
</head>
<body>
  <div class="container">
    <p id="content">Ваш текст.</p>
  </div>
</body>
</html>

Css:
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white; /* Default background color */
}

.container.dark {
  background-color: black; /* Dark background color */
  color: white; /* Text color for dark background */
}

JS:
const container = document.querySelector('.container');
const content = document.getElementById('content');

// Функция для определения цвета фона
function getBackgroundColor(element) {
  const bgColor = window.getComputedStyle(element).backgroundColor;
  return bgColor;
}

// Функция для определения оптимального цвета текста
function getTextColor(backgroundColor) {
  // Пример простой проверки на светлый или тёмный цвет фона
  const rgb = backgroundColor.match(/\d+/g);
  const brightness = (parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000;

  return brightness >= 128 ? 'black' : 'white';
}

// Изменение цвета текста в зависимости от цвета фона
function updateTextColor() {
  const bgColor = getBackgroundColor(container);
  const textColor = getTextColor(bgColor);
  content.style.color = textColor;
}

// Обновляем цвет текста при загрузке и изменении размера окна
window.addEventListener('load', updateTextColor);
window.addEventListener('resize', updateTextColor);

P.S Нагенерил код gpt
Ответ написан
Psychosynthesis
@Psychosynthesis
Fullstack developer and radio engineer
Погуглите в сторону css-свойства:
mix-blend-mode

Кажется это именно то що вам надо, но на старых браузерах может не работать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы