Πρότυπο background-blend-mode για CSS

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

background-blend-mode Η ιδιότητα καθορίζει το μίγμα μοντέλο κάθε στρώματος παρασκηνίου (χρώμα και/ή εικόνα).

Για περισσότερες πληροφορίες δείτε:

Εκμάθηση CSS:CSS Background

Παράδειγμα

Θέστε το μίγμα μοντέλο της εικόνας του παρασκηνίου ως "lighten" (φωτεινό):

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

Προσπάθησε να το δοκιμάσεις شخصικά

Μπορείτε να δείτε περισσότερες παραδείγματα TIY στην κορυφή της σελίδας.

Γλωσσή CSS

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Αξία χαρακτηριστικού

Αξία Περιγραφή
normal Προεπιλογή. Θέστε το μίγμα μοντέλο στο κανονικό.
multiply Θέστε το μίγμα μοντέλο στο multiply (πλαστικό).
screen Θέστε το μίγμα μοντέλο στο screen (οθόνη).
overlay Θέστε το μίγμα μοντέλο στο overlay (επικάλυψη).
darken Θέστε το μίγμα μοντέλο στο overlay (επικάλυψη).
lighten Θέστε το μίγμα μοντέλο στο lighten (φωτεινό).
color-dodge Ρυθμίστε το μίγμα μοτίβου ως color-dodge (χρώμα-διαφάνεια).
saturation Ρυθμίστε το μίγμα μοτίβου ως saturation (συγκράτηση).
color Ρυθμίστε το μίγμα μοτίβου ως color (χρώμα).
luminosity Ρυθμίστε το μίγμα μοτίβου ως luminosity (φωτεινότητα).

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

Προεπιλεγμένη τιμή: normal
Κληρονομικότητα: Όχι
Παραγωγή κίνησης: Δεν υποστηρίζεται. Εξετάστε:Προσαρμοσμένες ιδιότητες κίνησης。
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.backgroundBlendMode="screen"

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

Παράδειγμα

Ορίστε το μίγμα μοτίβου ως "multiply":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

Προσπάθησε να το δοκιμάσεις شخصικά

Παράδειγμα

Ορίστε το μίγμα μοτίβου ως "screen":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

Προσπάθησε να το δοκιμάσεις شخصικά

Παράδειγμα

Ορίστε το μίγμα μοτίβου ως "overlay":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

Προσπάθησε να το δοκιμάσεις شخصικά

Παράδειγμα

Ορίστε το μίγμα μοτίβου ως "darken":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

Προσπάθησε να το δοκιμάσεις شخصικά

Παράδειγμα

Ορίστε το μίγμα μοτίβου ως "color-dodge":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

Προσπάθησε να το δοκιμάσεις شخصικά

Παράδειγμα

Ορίστε το μίγμα μοτίβου ως "saturation":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

Προσπάθησε να το δοκιμάσεις شخصικά

Παράδειγμα

Ορίστε το μίγμα μοτίβου ως "color":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

Προσπάθησε να το δοκιμάσεις شخصικά

Παράδειγμα

Ορίστε το μίγμα μοτίβου ως "luminosity":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

Προσπάθησε να το δοκιμάσεις شخصικά

Παράδειγμα

Ορίστε το μίγμα μοτίβου ως "normal":

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

Προσπάθησε να το δοκιμάσεις شخصικά

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

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

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1