Comment changer la couleur de l'image avec CSS

Comment changer la couleur de l'image avec CSS : 1. Utilisez la méthode [mix-blend-mode] pour obtenir la valeur 2. Utilisez le mode de mélange [background-blend-mode: lighten] pour changez la couleur principale de l'image du noir à d'autres fins de couleur.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Comment changer la couleur de l'image avec CSS :

1. Tout d'abord, jetons un coup d'œil à la valeur du mix-blend-mode

<.>mix -blend-mode : normal ; // Normal

mix-blend-mode : multiplier; // Multiplier

mix-blend-mode : // Filtre

mix-blend-mode: overlay; // Overlay

mix-blend-mode: darken; // Darken

mix-blend-mode: lighten; >

mix-blend-mode : color-dodge ; // Color dodge

mix-blend-mode : color-burn ; // Couleur approfondie

mix-blend -mode : lumière dure ; // lumière dure

mix-blend-mode : lumière douce ; // lumière douce

mix-blend-mode : // différence

mix-blend-mode : exclusion ; // exclure

mix-blend-mode : teinte ; // teinte

mix-blend-mode : // saturation Degré

mix-blend-mode : couleur ; // Couleur

mix-blend-mode : luminosité ; // Luminosité

mix-blend-mode : initial ; >

mix-blend-mode: hériter; // Hériter

mix-blend-mode: unset; // Restaurer

Ce sont à peu près les mêmes que dans ps Cohérent , à l'exception des trois derniers

2. En utilisant le mode background-blend, nous pouvons superposer une couche supplémentaire d'autres couleurs sous l'image et changer la couleur principale de l'image en noir via le mode de fusion background- mode de fusion : éclaircir. Pour d'autres fins de couleur. Le code CSS simple est le suivant :

.pic {
width: 200px;
height: 200px;
background-image: url($img);
background-size: cover;
}
.pic1 {
background-image: url($img), linear-gradient(#f00, #f00);
background-blend-mode: lighten;
background-size: cover;
}

Recommandations d'apprentissage gratuites associées :

Tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!