Wie man erstellt: Durchsichtiger Text

Lernen Sie, wie man mit CSS reaktiven durchsichtigen Text erstellt (auch bekannt als geschnittener Text oder Ausstanztext).

Durchsichtiger Text ist ein transparenter Text, der so aussieht, als ob er aus dem Hintergrundbild herausgeschnitten wurde:

WUHAN

亲自试一试

Beachtung:Dieser Beispiel ist nicht für Internet Explorer oder Edge geeignet.

Wie man durchsichtigen Text erstellt

Schritt 1 - Fügen Sie HTML hinzu：

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

Schritt 2 - Fügen Sie CSS hinzu：

Mit dem Attribut mix-blend-mode kann transparenter Text in ein Bild eingefügt werden. Aber IE oder Edge unterstützen dies nicht:

.image-container {
  background-image: url("img_nature.jpg"); /* Verwendetes Bild - sehr wichtig! */
  background-size: cover;
  position: relative; /* Das Schneiden von Text muss in der Mitte des Bildes positioniert werden */
  height: 300px; /* Eine bestimmte Höhe */
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* Reaktive Zeichengröße */
  font-weight: bold;
  margin: 0 auto; /* Zentriert den Textcontainer */
  padding: 10px;
  width: 50%;
  text-align: center; /* Zentriert den Text */
  position: absolute; /* Positioniert den Text */
  top: 50%; /* Legt den Text in der Mitte aus */
  left: 50%; /* Legt den Text in der Mitte aus */
  transform: translate(-50%, -50%); /* Legt den Text in der Mitte aus */
  mix-blend-mode: screen; /* Dies macht das Schneiden von Text möglich */
}

亲自试一试

Wenn Sie schwarzen Text im Container wünschen, setzen Sie mix-blend-mode in multiplizieren，背景颜色更改为黑色，颜色更改为白色：

Beispiel

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

亲自试一试