Hvordan man laver: gennemskåret tekst

Lær at bruge CSS til at lave responsiv gennemskåret tekst (også kendt som klippe tekst eller cutout tekst).

Gennemskåret tekst er en gennemsigtig tekst, der ser ud til at være skåret ud af baggrundsbilledet:

WUHAN

Try it yourself

Bemærk:Dette eksempel passer ikke til Internet Explorer eller Edge.

Hvordan man laver gennemskåret tekst

1. trin - Tilføj HTML：

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

2. trin - Tilføj CSS：

Ved hjælp af mix-blend-mode-attribut kan man tilføje gennemskåret tekst til et billede. Men IE eller Edge understøtter ikke:

.image-container {
  background-image: url("img_nature.jpg"); /* Brugt billede - meget vigtigt! */
  background-size: cover;
  position: relative; /* Det skal være muligt at placere klippet tekst i midten af billedet */
  height: 300px; /* En bestemt højde */
{}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* Responsiv skriftstørrelse */
  font-weight: bold;
  margin: 0 auto; /* Centrer tekstbeholderen */
  padding: 10px;
  width: 50%;
  text-align: center; /* Centrer teksten */
  position: absolute; /* Placer teksten */
  top: 50%; /* Placer teksten i midten */
  left: 50%; /* Placer teksten i midten */
  transform: translate(-50%, -50%); /* Placer teksten i midten */
  mix-blend-mode: screen; /* Dette gør det muligt at klippe teksten */
{}

Try it yourself

Hvis du vil have sort tekst i beholderen, skal du sætte mix-blend-mode ændr multiplikation，gør baggrundsfarven sort og farven hvid：

eksempel

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

Try it yourself