Как сделать прозрачный текст?
1,00
р.
Мне нужно чтобы была кнопка, в которой текст был как фон (т.е. просто "дырявил блок")
Ответ
div#wrapper { position: relative height: 500px background: url(http://img-fotki.yandex.ru/get/5807/zzots.6/0_5e7c3_42723e72_XXL.jpg) } div#button { background: white position: absolute top: 160px left: 73px text-align: center padding: 15px font-size: 72px } div#button span { background: url(http://img-fotki.yandex.ru/get/5807/zzots.6/0_5e7c3_42723e72_XXL.jpg) -73px -160px no-repeat -webkit-text-fill-color: transparent -webkit-background-clip: text display:block }
Замечу, что тут два фона: один основной и один - у текста кнопки.
Важно в background с текстом поставить тот же фон, на котором кнопка и находится и сместить её на такое количество пикселей, на котором кнопка смещена относительно основного фона
По поводу поддержки браузерами - не могу подсказать, какие версии поддерживают. Самые последние Chrome/FF/Edge - точно работают
Поэтому, как мне кажется, лучше такое пока изображать в SVG
Ответ
div#wrapper { position: relative height: 500px background: url(http://img-fotki.yandex.ru/get/5807/zzots.6/0_5e7c3_42723e72_XXL.jpg) } div#button { background: white position: absolute top: 160px left: 73px text-align: center padding: 15px font-size: 72px } div#button span { background: url(http://img-fotki.yandex.ru/get/5807/zzots.6/0_5e7c3_42723e72_XXL.jpg) -73px -160px no-repeat -webkit-text-fill-color: transparent -webkit-background-clip: text display:block }
КНОПКА
Замечу, что тут два фона: один основной и один - у текста кнопки.
Важно в background с текстом поставить тот же фон, на котором кнопка и находится и сместить её на такое количество пикселей, на котором кнопка смещена относительно основного фона
По поводу поддержки браузерами - не могу подсказать, какие версии поддерживают. Самые последние Chrome/FF/Edge - точно работают
Поэтому, как мне кажется, лучше такое пока изображать в SVG
