Συνάρτηση sepia

Η συνάρτηση sepia επιτρέπει τη δημιουργία σέπια από μια εικόνα φόντου - μια ασπρόμαυρη εικόνα με καφε απόχρωση. Η τιμή 0 σημαίνει ότι η εικόνα παραμένει στην αρχική της μορφή. Η τιμή 100% ή 1 μετατρέπει πλήρως το φόντο σε σέπια. Οποιοσδήποτε αριθμός εντός αυτού του εύρους εφαρμόζει τη σέπια γραμμικά. Δεν επιτρέπονται αρνητικές τιμές. Από προεπιλογή, η τιμή είναι 0.

Σύνταξη

επιλογέας {
	filter: sepia(αριθμός);
}

Παράδειγμα

Ας μετατρέψουμε την εικόνα μας σε πλήρη σέπια:

<div id="elem"></div>

#elem {
	filter: sepia(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Τώρα ας μειώσουμε την εφαρμογή της σέπια στο 50%:

<div id="elem"></div>

#elem {
	filter: sepia(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Τώρα ας ορίσουμε στην συνάρτηση sepia μια τιμή ίση με 0:

<div id="elem"></div>

#elem {
	filter: sepia(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Δείτε επίσης

συνάρτηση blur,
που θολώνει το φόντο
συνάρτηση brightness,
που ορίζει τη φωτεινότητα του φόντου
συνάρτηση contrast,
που ορίζει την αντίθεση του φόντου
συνάρτηση drop-shadow,
που ορίζει σκιά στο φόντο
συνάρτηση hue-rotate,
που ορίζει την απόχρωση του φόντου
συνάρτηση invert,
που αντιστρέφει τα χρώματα του φόντου
συνάρτηση opacity,
που ορίζει τη διαφάνεια του φόντου
ιδιότητα background,
που είναι μια συντόμευση για το φόντο
ιδιότητα background-image,
με την οποία μπορεί να οριστεί εικόνα φόντου σε ένα μπλοκ
ιδιότητα filter,
που ορίζει το στυλ για το φόντο