Как сделать прозрачный шрифт на непрозрачном фоне?

Question

[PO6OT]

Как сделать, чтобы при наведении на кнопку шрифт просвечивал фон страницы?

.button{
white-space: nowrap;
margin: 8px;
border: 2px solid #ffffff;
padding: 9px;
color: #ffffff !important;
text-decoration: none;
background-color: rgba(0, 0, 0, 0);
}

a[class="button"]{
line-height: 48px !important;
}

.button:hover{
background-color: #ffffff;
color: rgba(0, 0, 0, 0) !important;
}

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

Вот пояснение:
codepen.io/anon/pen/EVgEVj

Answer 1

[aleksandrozz]

a {
background: red;
}

a:hover span {
opacity: 0.8;
}

Comments

[PO6OT]

тогда вся кнопка прозрачной
написано же " на непрозрачном фоне"

[aleksandrozz]

Вадим Егоров: нет, мы фон задаем для "А", а текст оборачиваем в "SPAN". В таком случае прозрачным будет только текст.

[aleksandrozz]

Вадим Егоров: https://jsfiddle.net/aeb6oLxn/

[PO6OT]

aleksandrozz: текст на кнопке должен просвечивать фон страницы
https://jsfiddle.net/aeb6oLxn/1/ - текст остался белым

[aleksandrozz]

Вадим Егоров: так это не прозрачность вам надо, а просто заменить цвет текста на цвет фона по наведению

[PO6OT]

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

[aleksandrozz]

Photoshop вам в помощь в таком случае. Выделите текст и удалите его, и сохраните кнопку в пнг.

[PO6OT]

aleksandrozz: нет, текст нужен, а не картинка. рисовать все умеют

[PO6OT]

aleksandrozz: пояснение)
codepen.io/anon/pen/EVgEVj

[aleksandrozz]

Вадим Егоров: Я понял о чем вы, как сделать с картинкой я не знаю. Но, если найдете решение, отпишитесь, будет интересно.

Answer 2

[Evanre]

Нет примера html кода, на сколько я понял, вот то что Вам нужно.

<a href="#" class="button">Я кнопка</a>

.button{
  background: url("http://lorempixel.com/200/100/nature/");
  display: inline-block;
  border-radius: 5px;
  padding: 10px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
    
}

.button:hover{
  /*opacity: .2;*/
  color: rgba(255, 255, 255, .2);
}

Можно как с помощью прозрачного цвета текста, так и с помощью opacity. Кнопку можно построить как угодно
Живой пример тут: Codepen

Comments

[PO6OT]

прозрачный цвет текста - тогда просвечивается через текст сам фон кнопки
а если opacity, то фон кнопки тоже прозрачный, что нельзя

[Evanre]

Вадим Егоров: Я Вас не могу понять. У Вас есть пример того как это должно выглядеть до и после наведения?

[PO6OT]

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

[PO6OT]

Евгений Жученко: пояснение)
codepen.io/anon/pen/EVgEVj