Css - кнопка с прозрачным текстом

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

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

См. Пример ниже.

Я ищу решение только для css.

Спасибо за помощь.

Blue backgroundpurple background

Насколько это динамично? Какой метод используется для выбора цвета? Почему вы не можете просто установить цвет дважды, один раз для фона и один раз для текста, всякий раз, когда цвет выбирается?

amflare 13.09.2018 20:31

@amflare Responsive - в разных размерах экрана расположение может отличаться, а это значит, что цвет текста может отличаться, если фон является изображением. Кроме того, если кнопка находится под текстом, который является динамическим - длина текста может повлиять на расположение кнопки.

user3063182 13.09.2018 20:36

в вопросе, который вы связали, есть идеальное решение: stackoverflow.com/a/29747686/8620333 .. почему оно вам не подходит?

Temani Afif 13.09.2018 21:42
2
3
3 934
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете получить этот эффект, добавив фон кнопки перед текстом, используя псевдоэлемент, а затем используя mix-blend-mode на кнопке (screen) и псевдоэлемент (color-burn) для создания эффекта вырезания.

Примечание: это будет работать, только если фон кнопки белый.

Примечание:mix-blend-mode не поддерживается IE и Edge.

.button {
  position: relative;
  padding: 0.5em 1em;
  font-size: 1.2em;
  border: none;
  background: none;
  outline: none;
  color: black;
  mix-blend-mode: screen;
}

.button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: white;
  border-radius: 0.3em;
  content: '';
  mix-blend-mode: color-burn;
}

.bg {
  padding: 2em;
}

.bg1 {
  background: purple;
}

.bg2 {
  background: linear-gradient(to bottom, gold 50%, silver 50%);
}
<div class="bg bg1">
  <button class="button">Text</button>
</div>

<div class="bg bg2">
  <button class="button">Text</button>
</div>

Другие вопросы по теме