Πώς να δημιουργήσετε: κενό κείμενο

Μάθετε πώς να δημιουργήσετε προσαρμοσμένο κενό κείμενο με CSS (γνωστό και ως κόπτημα κειμένου ή κενό κείμενο).

Το κενό κείμενο είναι κείμενο διαφάνειας, το οποίο φαίνεται ότι κόβεται από την εικόνα του παρασκηνίου:

WUHAN

Δοκιμάστε το προσωπικά

Σημείωση:Αυτό το παράδειγμα δεν είναι κατάλληλο για το Internet Explorer ή το Edge.

Πώς να δημιουργήσετε κενό κείμενο

Βήμα 1 - Προσθέστε HTML:

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

Βήμα 2 - Προσθέστε CSS:

Με τη χρήση της ιδιότητας mix-blend-mode μπορείτε να προσθέσετε κενό κείμενο στην εικόνα. Αλλά το IE ή το Edge δεν υποστηρίζουν:

.image-container {
  background-image: url("img_nature.jpg"); /* Χρησιμοποιούμενη εικόνα - πολύ σημαντικό! */
  background-size: cover;
  position: relative; /* Χρειάζεται να τοποθετήσετε το κόπτημα κειμένου στη μέση της εικόνας */
  υψος: 300px; /* Διακριτικό ύψος */
{}
.text {
  background-color: λευκό;
  χρώμα: μαύρο;
  font-size: 10vw; /* Προσαρμοσμένο μέγεθος γραμματοσειράς */
  font-weight: bold;
  margin: 0 auto; /* Συντακτικό κουτί κειμένου στη μέση */
  χώρος: 10px;
  πλάτος: 50%;
  text-align: center; /* Συντακτικό κείμενο στη μέση */
  position: absolute; /* Προσδιορίστε το κείμενο */
  βόρεια: 50%; /* Βάλτε το κείμενο στη μέση */
  αριστερά: 50%; /* Βάλτε το κείμενο στη μέση */
  transform: μετακίνηση(-50%, -50%); /* Βάλτε το κείμενο στη μέση */
  mix-blend-mode: screen; /* Αυτό επιτρέπει το κόπτημα κειμένου */
{}

Δοκιμάστε το προσωπικά

Αν θέλετε κείμενο κουτιού μαύρο, μεταβείτε στο mix-blend-mode μετατρέψτε σε πολλαπλασιασμός，μεταβάστε το χρώμα του παρασκηνίου σε μαύρο και το χρώμα σε λευκό:

παράδειγμα

.text {
  background-color: μαύρο;
  χρώμα: λευκό;
  mix-blend-mode: multiply;
  ....
{}

Δοκιμάστε το προσωπικά