Miten luodaan: läpikuultava teksti

Opitaan, miten luodaan CSS:llä reagoiva läpikuultava teksti (tunnettu myös nimellä leikattu teksti tai erottelu teksti).

Läpikuultava teksti on läpikuultava teksti, joka näyttää siltä kuin se olisi leikattu taustakuvasta:

WUHAN

Try it yourself

Huomioitavaa:Tämä esimerkki ei toimi Internet Explorerissä tai Edge:ssä.

Miten luodaan läpikuultavaa tekstiä

Vaihe 1 - Lisää HTML:

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

Vaihe 2 - Lisää CSS:

Voit käyttää mix-blend-mode-ominaisuutta lisätäksesi läpikuultavaa tekstiä kuvan päälle. Mutta IE tai Edge ei tue tätä:

.image-container {
  background-image: url("img_nature.jpg"); /* Käytettävä kuva - erittäin tärkeää! */
  background-size: cover;
  position: relative; /* Aseta leikatun tekstin sijainti kuvan keskelle */
  height: 300px; /* Tietty korkeus */
{}
.text {
  background-color: valkoinen;
  color: musta;
  font-size: 10vw; /* Responsiivinen fonttikoko */
  font-weight: bold;
  margin: 0 auto; /* Keskitä tekstin säiliö */
  padding: 10px;
  width: 50%;
  text-align: center; /* Keskitä teksti */
  position: absolute; /* Aseta tekstin sijainti */
  top: 50%; /* Aseta teksti keskelle */
  left: 50%; /* Aseta teksti keskelle */
  transform: translate(-50%, -50%); /* Aseta teksti keskelle */
  mix-blend-mode: screen; /* Tämä mahdollistaa tekstin leikkaamisen */
{}

Try it yourself

Jos haluat mustan säiliön tekstin, muuta mix-blend-mode muuta kertolasku，muuta taustaväri mustaksi ja väriksi valkoiseksi:

Esimerkki

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

Try it yourself