Συνάρτηση invert
Η συνάρτηση invert επιτρέπει
την αντιστροφή των χρωμάτων σε μια εικόνα φόντου.
Η τιμή 0 σημαίνει
ότι η εικόνα παραμένει στην αρχική της μορφή. Η τιμή
100% ή 1 αντιστρέφει πλήρως τα χρώματα του φόντου.
Οποιοσδήποτε αριθμός εντός
αυτού του εύρους αντιστρέφει μερικώς τα χρώματα.
Δεν μπορεί να οριστεί αρνητική τιμή.
Από προεπιλογή, η τιμή είναι 0.
Σύνταξη
επιλογέας {
filter: invert(αριθμός);
}
Παράδειγμα
Ας αντιστρέψουμε τα χρώματα της εικόνας μας σε
τιμή 50%:
<div id="elem"></div>
#elem {
filter: invert(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Παράδειγμα
Τώρα ας αντιστρέψουμε τα χρώματα της εικόνας μας σε
τιμή 100%:
<div id="elem"></div>
#elem {
filter: invert(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Παράδειγμα
Τώρα ας ορίσουμε στη
συνάρτηση invert τιμή
ίση με 0:
<div id="elem"></div>
#elem {
filter: invert(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Δείτε επίσης
-
συνάρτηση
blur,
που θολώνει το φόντο -
συνάρτηση
brightness,
που ορίζει τη φωτεινότητα του φόντου -
συνάρτηση
contrast,
που ορίζει την αντίθεση του φόντου -
συνάρτηση
drop-shadow,
που ορίζει σκιά στο φόντο -
συνάρτηση
hue-rotate,
που ορίζει τον τόνο χρώματος του φόντου -
συνάρτηση
opacity,
που ορίζει τη διαφάνεια του φόντου -
συνάρτηση
sepia,
που μετατρέπει το φόντο σε σέπια -
ιδιότητα
background,
που είναι μια συντόμευση για το φόντο -
ιδιότητα
background-image,
με την οποία μπορεί να οριστεί εικόνα φόντου σε ένα στοιχείο -
ιδιότητα
filter,
που ορίζει το στυλ για το φόντο