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

461

09 мая 2017, 04:35

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

Answer 1

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

Answer 2

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

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

<html> 
<body>   
<style> 
 body { 
  background-image: url(http://s1.gagtime.ru/2015/08/00027_3.jpg); 
  background-repeat: no-repeat; 
  background-size: cover; 
  font-family: verdana, sans-serif;  
  </style> 
<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"></rect> 
        
		 <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"></rect> 
        
		 <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="-100" to="25" begin="green.mouseover" dur="2s" restart="whenNotActive" fill="freeze"></animate> 
  </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="-100" to="25" begin="dodger.mouseover" dur="2s" restart="whenNotActive" fill="freeze"></animate> 
  </rect> 
 
 
</svg>  
</div> 
 
</body> 
</html>