How to change image color with css

How to change the color of the picture in css: 1. Use the [mix-blend-mode] method to obtain the value; 2. Use the mixing mode [background-blend-mode: lighten] to change the main color of the picture to black. Other color purposes.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to change the color of an image with css:

1. First, let’s take a look at the value of mix-blend-mode

mix -blend-mode: normal; // Normal

mix-blend-mode: multiply; // Multiply

mix-blend-mode: screen; // Filter

mix-blend-mode: overlay; // Overlay

mix-blend-mode: darken; // Darken

mix-blend-mode: lighten; // Brighten

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

mix-blend-mode: color-burn; // Color deepen

mix-blend -mode: hard-light; // Hard light

mix-blend-mode: soft-light; // Soft light

mix-blend-mode: difference; // Difference

mix-blend-mode: exclusion; // Exclusion

mix-blend-mode: hue; // Hue

mix-blend-mode: saturation; // Saturation Degree

mix-blend-mode: color; // Color

mix-blend-mode: luminosity; // Brightness

mix-blend-mode: initial; / / Default

mix-blend-mode: inherit; // Inherit

mix-blend-mode: unset; // Restore

These are roughly the same as in ps Consistent, except for the last three

2. Using background-blend-mode, we can superimpose an additional layer of other colors under the image, and change the main color of the image to black through the blending mode background-blend-mode: lighten. For other color purposes. The simple CSS code is as follows:

.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;
}

Related free learning recommendations: javascript video tutorial

The above is the detailed content of How to change image color with css. For more information, please follow other related articles on the PHP Chinese website!