Hur man skapar: genomskinlig text

Lär dig hur man använder CSS för att skapa responsiv genomskinlig text (också kallad klipp text eller utklipp text).

Genomskinlig text är en genomskinlig text som ser ut som om den har klippt ut från bakgrundsbilden:

WUHAN

Prova själv

Observera:Detta exempel är inte lämpligt för Internet Explorer eller Edge.

Hur man skapar genomskinlig text

Steg 1 - Lägg till HTML:

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

Steg 2 - Lägg till CSS:

Använd mix-blend-mode-attributet för att lägga till genomskinlig text till bilden. Men IE eller Edge stöder inte:

.image-container {
  background-image: url("img_nature.jpg"); /* Använd这幅图像 - mycket viktigt! */
  background-size: cover;
  position: relative; /* Detta behöver placera klipp texten i mitten av bilden */
  height: 300px; /* En viss höjd */
{}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; /* Responsiv textstorlek */
  font-weight: bold;
  margin: 0 auto; /* Centrera textkorgen */
  padding: 10px;
  width: 50%;
  text-align: center; /* Centrera texten */
  position: absolute; /* Placera texten */
  top: 50%; /* Placera texten i mitten */
  left: 50%; /* Placera texten i mitten */
  transform: translate(-50%, -50%); /* Placera texten i mitten */
  mix-blend-mode: screen; /* Detta gör att klippa texten möjligt */
{}

Prova själv

Om du vill ha svart container-text, sätt mix-blend-mode ändra till multiplikation，sätt bakgrundsfärgen till svart, och färgen till vit:

exempel

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

Prova själv