0

Нужно чтобы часть черного текста, которая заходит на изображение, становилась белым цветом. Перепробовал все методы, но так и не пришел у нужному результату.

Пример который должен получится

Я попробовал сделать так:

.menu__title {
    font-size: 25vw;
    filter: invert(1) grayscale(1) contrast(1);
    color: #000;
}

Но получил это: введите сюда описание изображения

3

2 ответа 2

1

.container {
  width: 200px;
  height: 200px;
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqALYQkQCuDoHq01hS1OUIN7HX_j_4DqJYgO6c6Yj00Q&s) left/50% 100% no-repeat, url(https://www.olimptk.ru/wp-content/uploads/2018/05/rastitelnyj-grunt.jpg) right/100% 100% no-repeat;
}

.container h2 {
  font-size: 40px;
  text-align: center;
  padding-top: 70px;
  mix-blend-mode: difference;
  color: black;
  filter: invert(90%);
}
<div class="container">
  <h2>lorem</h2>
</div>

Вот так это можно реализовать. Может не точь в точь, как Вы хотели, но мы видим, что это работает.

.container {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, beige 50%, black 50%);
}

.container h2 {
  font-size: 40px;
  text-align: center;
  padding-top: 30px;
  mix-blend-mode: difference;
  color: black;
  filter: invert(100%);
}
<div class="container">
  <h2>lorem</h2>
</div>

-1

Для того чтобы изменить цвет части текста на изображении, вы можете использовать CSS и смешивание цветов с помощью background-clip. Вот пример того, как это можно сделать:

HTML:

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image">
  <div class="text-overlay">
    <p class="black-text">Часть черного текста</p>
    <p class="white-text">Часть белого текста</p>
  </div>
</div>

CSS:

.image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.black-text {
  background-color: black;
  color: white;
  padding: 5px 10px;
  margin: 0;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 24px;
}

.white-text {
  color: black;
  font-size: 24px;
  background-color: white;
  padding: 5px 10px;
  margin: 0;
}

В этом примере background-clip: text; и -webkit-background-clip: text; используются для смешивания цветов текста с фоном. Текст с классом black-text будет черным и проникает через белый фон, а текст с классом white-text будет белым на черном фоне.

Вы можете настроить размер шрифта, цвета и отступы под свои нужды.

2
  • 1
    Минус за ChatGPT.
    – EvgeniyZ
    18 сен в 22:53
  • 1
    Никто не заметил, что тут нет изменения цвета от фона, а просто слово разбито на 2 части и покрашено в разные цвета? В ответе выше так и показано...
    – Maneken
    19 сен в 5:43

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.