CSS mix-blend-mode ιδιότητα

Ορισμός και χρήση

Η ιδιότητα mix-blend-mode καθορίζει πώς το περιεχόμενο του στοιχείου πρέπει να συγχωνεύεται με το φόντο του άμεσου γονικού στοιχείου.

Δείτε επίσης:

Χειροκίνητο εγχειρίδιο CSS:Χαρακτηριστικό background-blend-mode CSS

Παράδειγμα

Κάδρο με κόκκινο περιβάλλον και εικόνα που ενσωματώνεται με αυτό το κόκκινο κάδρο (κατασκοπεύσει):

.container {
  χρώμα περιβάλλοντος: κόκκινο;
}
.container img {
  mix-blend-mode: κατασκοπεύσει;
}

Προσπαθήστε το προσωπικά

Περισσότερες παραδείγματα TIY μπορούν να βρεθούν στο κάτω μέρος της σελίδας.

Γλώσσα CSS

mix-blend-mode: κανονικός|πολλαπλασιασμός|οθόνη|επικάλυψη|κατασκοπεύσει|ανοιχτότητα|αποφυγή χρώματος|καύση χρώματος|διαφορά|εξαίρεση|ανοιχτότητα χρώματος|ανοιχτότητα;

Τιμή προθέματος

Τιμή Περιγραφή
κανονικός Αυτό είναι η προεπιλεγμένη τιμή. Αναθέστε τον τύπο συνδυασμού μίξης στον κανονικό.
πολλαπλασιασμός Αναθέστε τον τύπο συνδυασμού μίξης στο πολλαπλασιασμό.
οθόνη Αναθέστε τον τύπο συνδυασμού μίξης στο οθόνη.
επικάλυψη Αναθέστε τον τύπο συνδυασμού μίξης στο επικάλυψη.
κατασκοπεύσει Αναθέστε τον τύπο συνδυασμού μίξης στην κατασκοπεύσει.
ανοιχτότητα Αναθέστε τον τύπο συνδυασμού μίξης στην ανοιχτότητα.
αποφυγή χρώματος Αναθέστε τον τύπο συνδυασμού μίξης στην αποφυγή χρώματος.
καύση χρώματος Αναθέστε τον τύπο συνδυασμού μίξης στην καύση χρώματος.
διαφορά Αναθέστε τον τύπο συνδυασμού μίξης στην διαφορά.
εξαίρεση Αναθέστε τον τύπο συνδυασμού μίξης στην εξαίρεση.
ανοιχτότητα χρώματος Αναθέστε τον τύπο συνδυασμού μίξης στην ανοιχτότητα χρώματος.
πυκνότητα Αναθέστε τον τύπο συνδυασμού μίξης στην πυκνότητα.
χρώμα Αναθέστε τον τύπο συνδυασμού μίξης στο χρώμα.
ανοιχτότητα Αναθέστε τον τύπο συνδυασμού μίξης στην ανοιχτότητα.

Τεχνικές λεπτομέρειες

Προεπιλεγμένη τιμή: κανονικός
Προέλευση: Όχι
Δημιουργία κινήσεων: Δεν υποστηρίζεται. Δείτε επίσης:Ατρύπες κινήσεων.
Γλώσσα JavaScript: object.style.mixBlendMode = "κατασκοπεύσει"

Περισσότερες παραδείγματα

Παράδειγμα

Εμφάνιση όλων των τιμών:

.normal {μίγμα-συνδυασμός: κανονικός;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

Προσπαθήστε το προσωπικά

Παράδειγμα

Χρησιμοποιήστε το mix-blend-mode για να δημιουργήσετε μια εύρεστη κουτί/αφαίρεση κειμένου (εκκόψιμο κειμένου):

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

Προσπαθήστε το προσωπικά

Υποστήριξη προγράμματος περιήγησης

Τα αριθμοί στη τύχη σηματοδοτούν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως αυτό το χαρακτηριστικό.

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0