Как сделать текст в блоке прозрачным?

Question

[suhan_74]

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

Answer 1

[Ankhena]

Прямо так "протереть", боюсь, не получится. Можно сделать вид:

наложить на текст изображение аналогичное фоновому
css.yoksel.ru/css-and-svg-masks

Comments

[metaf]

+ еще ссылка https://css-tricks.com/how-to-do-knockout-text/

Answer 2

[iBird Rose]

color: transparent? правда хз сработает ли)
p.s. а что мешает покрасить текст в белый? на белом фоне и будет выглядить как прозрачный

Comments

[riot26]

мда... и это "frontend-разработчик"...

Answer 3

[riot26]

https://jsfiddle.net/yp49mcw5/
так?

Comments

[suhan_74]

Нет. Поскольку первый фон фотография и простым изменением color на цвет родительского backgrounda тут не отделаться.

Answer 4

[dom1n1k]

Если такая кнопка на сайте одна (например, кнопка "Купить" в промо-блоке) - проще всего её тупо сделать двумя картинками под каждое состояние. Ну или одним спрайтом, но это уже детали.
А вот если таких кнопок непредсказуемо много или текст должен меняться... это сложнее. Есть вариант с SVG матричными фильтрами (можно сделать так, что фильтр сделает определенный цвет прозрачным) - но это довольно геморно и не совсем кроссбраузерно.

Answer 5

[Imin]

в чем проблема...
задайте псевдоклассу :active (при наведении на кнопку)
.класс_кнопки:active {
background-color: #ffffff;
color: (зайдайте в rgba, где последняя цифра будет уровень прозрачности цвета);
}

Comments

[Вика Мармеладка]

active при наведении на кнопку?) Юмарной вы однако...