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

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]

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