26

Мне нужно чтобы была кнопка, в которой текст был как фон (т.е. просто "дырявил блок")

введите сюда описание изображения

4
  • Может пример приведите...
    – MihailPw
    7 мая 2017 в 11:41
  • хорошо, приведу
    – user245150
    7 мая 2017 в 11:56
  • css - нельзя сделать(не считая background-clip, который еще не поддерживается почти никем емнип). SVG - можно 7 мая 2017 в 12:23
  • Ну, подскажите.
    – user245150
    7 мая 2017 в 12:26

3 ответа 3

18

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;
}
<div id="wrapper">

  <div id="button">
    <span>КНОПКА</span>
  </div>
</div>

Замечу, что тут два фона: один основной и один - у текста кнопки.

Важно в background с текстом поставить тот же фон, на котором кнопка и находится и сместить её на такое количество пикселей, на котором кнопка смещена относительно основного фона


По поводу поддержки браузерами - не могу подсказать, какие версии поддерживают. Самые последние Chrome/FF/Edge - точно работают

Поэтому, как мне кажется, лучше такое пока изображать в SVG

8
  • -webkit-background-clip в FF и Edge? <s>Что-то не думаю.</s> UPDATE: Действительно работает.
    – Qwertiy
    26 сен 2017 в 20:33
  • @Qwertiy тебя только у background-clip это смутило? )) теперь стоит задать вопрос на ruSO - какого чёрта это работает ;-) 26 сен 2017 в 20:45
  • Просто все растаскивают вебкитовский префикс. Первая была Опера 12 :)
    – Qwertiy
    26 сен 2017 в 20:47
  • @Qwertiy ну опера-то понятно. они давно сдались) но чтоб сам MS!!! хых 26 сен 2017 в 20:48
  • Уже IE11 умел градиенты с префиксом вебкита
    – Qwertiy
    26 сен 2017 в 20:48
12

Две SVG кнопки с прозрачным текстом.

Анимация начинается при наведении курсора на цветные полоски слева. Прозрачный текст кнопок реализован при помощи SVG маски.

body {
  background-image: url(https://i.stack.imgur.com/AZ8Hg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  font-family: verdana, sans-serif;
}
<div id="container">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800" viewBox="0 0 800 800">
    <defs>
      <mask id="hole">
        <rect x="0" y="0" width="400" height="200" fill="white"/>
        <text x="57" y="110" font-size="40"  fill="black"> Button- </text> 
      </mask> 
      <mask id="hole1">
        <rect x="0" y="250" width="400" height="200" fill="white"/>
        <text x="57" y="310" font-size="40" fill="black"> Button+ </text> 
      </mask>	  
    </defs>
    <rect id="green" x="-175" y="50" rx="25" ry="25" width="200" height="100" fill="yellowgreen" mask="url(#hole)">
      <animate attributeName="x" from="-175" to="25" begin="green.mouseover" dur="1.5s" restart="whenNotActive" fill="freeze"/>
    </rect> 
    <rect id="dodger" x="-175" y="250" rx="25" ry="25" width="200" height="100" fill="dodgerblue" mask="url(#hole1)">
      <animate attributeName="x" from="-175" to="25" begin="dodger.mouseover" dur="1.5s" restart="whenNotActive" fill="freeze"/>
    </rect>
  </svg>
</div>

4

Еще один вариант, но есть проблема с поддержкой браузерами.
mix-blend-mode на данный момент не работает в в ie/edge и частично в Safari

h1{
    background:  black;
    color: white;
    mix-blend-mode: multiply;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.