Paano gumawa: Teksto na walang laman

Learn how to use CSS to create responsive text with holes (also known as cutout text or masked text).

Ang teksto na walang laman ay teksto na walang kulay, na nararapat na nasira sa likurang larawan:

WUHAN

亲自试一试

Pansin:Ang halimbawa na ito ay hindi applicable sa Internet Explorer o Edge.

Paano gumawa ng teksto na walang laman

Unang hakbang - Magdagdag ng HTML:

<div class="image-container">
  <div class="text">NATURE</div>
</div>

Ikalawa na hakbang - Magdagdag ng CSS:

Maaaring gamitin ang attribute ng mix-blend-mode upang magdagdag ng teksto na walang laman sa larawan. Hindi naisagot ng IE o Edge:

.image-container {
  background-image: url("img_nature.jpg"); /* Ginagamit na larawan - napakahalaga! */
  background-size: cover;
  position: relative; /* Kailangan ilagay ang mapapalitan ng teksto sa gitna ng larawan */
  height: 300px; /* Tanging taas */
{}
.text {
  background-color: puti;
  color: puti;
  font-size: 10vw; /* Responsibong laki ng font */
  font-weight: bold;
  margin: 0 auto; /* Itinutulak ang container ng teksto sa gitna */
  padding: 10px;
  width: 50%;
  text-align: center; /* Itinutulak ang teksto sa gitna */
  position: absolute; /* Ilagay ang teksto */
  top: 50%; /* Ilagay ang teksto sa gitna */
  left: 50%; /* Ilagay ang teksto sa gitna */
  transform: translate(-50%, -50%); /* Ilagay ang teksto sa gitna */
  mix-blend-mode: screen; /* Hindi na mapapalitan ang teksto */
{}

亲自试一试

Kung gusto mong magkaroon ng teksto sa kulay ng puti sa container, i-set ang mix-blend-mode gawing magkakahalintulad，gawing puti ang kulay ng likuran, gawing puti ang kulay:

mga halimbawa

.text {
  background-color: puti;
  color: puti;
  mix-blend-mode: multiply;
  ....
{}

亲自试一试