Fonction CSS sepia()

Définition et utilisation

CSS sepia() La fonction de filtre transforme l'image en brun foncé (une couleur plus chaude et plus brune/verte).

  • 100% (ou 1) rend l'image complètement brun foncé
  • 0% (ou 0) n'affecte pas

Exemple

Exemple 1

Appliquez différents effets de brun foncé aux images :

#img1 {
  filter: sepia(1);
}
#img2 {
  filter: sepia(60%);
}
#img3 {
  filter: sepia(0.4);
}

Essayez-le vous-même

Exemple 2

Transforme sepia() et backdrop-filter Utilisation combinée des attributs :

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: sepia(100%);
  backdrop-filter: sepia(100%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Essayez-le vous-même

Syntaxe CSS

sepia(amount)
Valeur Description
amount

Optionnel. Spécifiez la valeur de brun foncé, qui peut être un nombre ou un pourcentage.

100% (ou 1) rend l'élément complètement brun foncé.

0% (ou 0) représente l'image originale (sans effet). La valeur par défaut est 0.

Détails techniques

Version : Module d'effets de filtrage CSS niveau 1

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Pages associées

Référence :Attribut filter CSS

Référence :Fonction CSS blur()

Référence :Fonction CSS brightness()

Référence :Fonction CSS contrast()

Référence :Fonction CSS drop-shadow()

Référence :Fonction CSS grayscale()

Référence :Fonction CSS hue-rotate()

Référence :Fonction CSS invert()

Référence :Fonction opacity() CSS

Référence :Fonction saturate() CSS