Various ways to modify the background image color using CSS3

CSS3 can change the color of pictures. From now on, you no longer need to design multiple pictures, and you can modify them at any time. The following is a brief introduction on how to change the color of the background image in CSS3.

Method 1 : Using the drop-shadow in the CSS3 filter

The code is as follows:

<style>
.icon{
    display: inline-block;
    width: 180px;
    height: 180px;
    background: url('img/XXX.png') no-repeat center cover;
    overflow: hidden;
}
.icon:after{
    content: '';
    display: block;
    height: 100%;
    transform: translateX(-100%);
    background: inherit;
    filter: drop-shadow(144px 0 0 #fff); //Color value to be modified}
</style>
 
<i class="icon"></i>

illustrate:

The drop-shadow filter can add a shadow to the non-transparent area of ​​an element or image.

Applying a non-blurred shadow to a transparent PNG icon is equivalent to generating an icon of another color.

Then use overflow:hidden and displacement processing to hide the original icon

Mix-blend-mode value: [Except the last 3, the effect is roughly the same as PS]

: : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

Method 2 : Using CSS3's mix-blend-mode and background-blend-mode

The code is as follows:

<style>
.icon{
    display: inline-block;
    width: 180px;
    height: 180px;
    background-image: url($'img/XXX.png'), linear-gradient(#f00, #f00);
    background-blend-mode: lighten;
    background-size: cover;
}
</style>
<i class="icon"></i>

illustrate:

Lighten blending mode: Lighten, lighten mode has the opposite effect of darken mode. Black is darker than any color, so black will be replaced by any color. Conversely, if the background color of the material is black, the main color is white. Then you should use the darken blending mode.

Linear-gradient(#f00, #00f) can also achieve the effect of gradient color.

Summarize:

Method 1 is limited to images in png format, while method 2 has no restrictions on the image format.

CSS3 has certain compatibility. Chrome, Firefox and mobile terminals are more suitable for use.

This concludes this article about various ways to modify background image color using CSS3. For more information on modifying background image color using CSS3, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!