БЛОГ НА HUSL


Как сделать цвет текста кнопки в фон заднего изображения?

Автор вопроса: Єськіна Анна Андріївна

Я уже перепробовала множество вариантов начиная от transparent, заканчивая тем, что приведу ниже в коде. Но получается то, да не то. Белый цвет угасает и становится более полупрозрачным, не сходится с макетом.

Мой результат

Нужно чтобы выглядело следующим образом:

Пример с макета

.header__top-menu .menu__btn {
  border-radius: 34px;
  border: 1px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
  padding: 5px 35px;
  font-weight: 500;
  line-height: 24.52px;
  cursor: pointer;
  transition: all 0.3s;
}

.header__top-menu .menu__btn:hover {
  background-color: #ffffff;
}

.header__top-menu .menu__btn:hover span {
  text-shadow: 0 0 0 transparent;
}

.header__top-menu .menu__btn span {
  background-image: url(../img/main-picture.jpeg);
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 0 currentColor;
}
<nav class="header__top-menu">
  <button class="menu__btn">
  <span>Black sea Wine route</span>
   </button>
  <button class="menu__btn">
   <span>Armenia</span>
 </button>
  <button class="menu__btn">
   <span>Georgia</span>
   </button>
  <button class="menu__btn">
<span>Ukraine</span>
  </button>
  <button class="menu__btn">
  <span>Greece</span>
    </button>
</nav>


Источник

Ответы (4 шт):

Автор решения: Виктор Карев

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

.header__top-menu {
    --bg-color: #88bbbb;
    background-color: var(--bg-color);
    position: relative;
}

.header__top-menu .menu__btn {
  border-radius: 34px;
  border: 1px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
  padding: 5px 35px;
  font-weight: 500;
  line-height: 24.52px;
  cursor: pointer;
  transition: all 0.3s;
}

.header__top-menu .menu__btn:hover {
  background-color: #ffffff;
  color: var(--bg-color);
}

.shade {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0.5),rgba(255,255,255,0));
}
<nav class="header__top-menu">
  <button class="menu__btn">
  Black sea Wine route
   </button>
  <button class="menu__btn">
   Armenia
 </button>
  <button class="menu__btn">
   Georgia
   </button>
  <button class="menu__btn">
    Ukraine
  </button>
  <button class="menu__btn">
    Greece
  </button>
  <div class="shade"></div>
</nav>

→ Ссылка
Автор решения: UModeL

Если кнопки чёрные или белые, то проще всего воспользоваться режимами наложения:

body { background: 0 0 / cover url('https://i.sstatic.net/1wjXBT3L.jpg') no-repeat; height: 100vh; text-align: center; }

.header__top-menu .menu__btn {
  margin: 5px;
  padding: 0;
  border: none;
  border-radius: 100vmax;
  font: bold 16px/1.5em 'Arial Black', sans-serif;
  background: none;
  box-shadow: inset 0 0 1px 2px currentcolor;
  cursor: pointer;
}
.header__top-menu .menu__btn.black { color: black; }
.header__top-menu .menu__btn.white { color: white; }

.header__top-menu .menu__btn span {
  display: block;
  padding: .5em 1.5em;
  border-radius: inherit;
  transition: .4s ease;
}
.header__top-menu .menu__btn:hover span { filter: invert(1); }
.header__top-menu .menu__btn.black span { background-color: white; mix-blend-mode: multiply; }
.header__top-menu .menu__btn.white span { background-color: black; mix-blend-mode: screen; }
<nav class="header__top-menu">
  <button class="menu__btn black"><span>Black sea Wine route</span></button>
  <button class="menu__btn white"><span>Armenia</span></button>
  <button class="menu__btn black"><span>Georgia</span></button>
  <button class="menu__btn white"><span>Ukraine</span></button>
  <button class="menu__btn black"><span>Greece</span></button>
</nav>

→ Ссылка
Автор решения: Matvj

Чтобы сделать цвет текста кнопки соответствующим цвету фона заднего изображения, можно использовать несколько подходов в зависимости от того, что именно вам надо.

1. CSS (статический подход)

Если фон кнопки статичен, вы можете просто выбрать цвет текста, который будет гармонировать с фоном. Например:

body {
  background-image: url('background.jpg');
  /* Укажите путь к вашему изображению */
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: transparent;
  /* Прозрачный фон */
  color: white;
  /* Цвет текста */
  font-size: 16px;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Кнопка с цветом текста</title>

</head>

<body>
  <button class="button">Нажми на меня</button>
</body>

</html>

2. CSS с использованием mix-blend-mode

Если вы хотите, чтобы текст кнопки изменялся в зависимости от фона, вы можете использовать свойство mix-blend-mode. Этот метод позволяет комбинировать цвета текста и фона.

body {
  background-image: url('background.jpg');
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: transparent;
  color: white;
  font-size: 16px;
  mix-blend-mode: difference;
  /* Эффект смешивания */
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Кнопка с смешиванием</title>

</head>

<body>
  <button class="button">Нажми на меня</button>
</body>

</html>

→ Ссылка
Автор решения: Евгений Ли

Не понял, что нужно было сделать если честно, всё легко делается.

body {
  height: 94vh;
  background-color: #A7CBE4;
}
.header__top-menu .menu__btn {
  border-radius: 34px;
  border: 1px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
  padding: 10px 35px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.header__top-menu .menu__btn:hover {
  background-color: #ffffff;
}

.header__top-menu .menu__btn:hover span {
  text-shadow: 0 0 0 transparent;
  color: #A7CBE4;
}

.header__top-menu .menu__btn span {
  background-image: url(../img/main-picture.jpeg);
  background-clip: text;
  color: white;
  text-shadow: 0 0 0 currentColor;
}
<nav class="header__top-menu">
  <button class="menu__btn">
  <span>Black sea Wine route</span>
   </button>
  <button class="menu__btn">
   <span>Armenia</span>
 </button>
  <button class="menu__btn">
   <span>Georgia</span>
   </button>
  <button class="menu__btn">
<span>Ukraine</span>
  </button>
  <button class="menu__btn">
  <span>Greece</span>
    </button>
</nav>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.