Parsing CSS to extract picture theme color function (TIPS)

Time:2021-7-26

background

The reason is that a classmate in the wechat technology group asked, what is the way to obtain the main color of the picture? There is a picture to get his main tone:

The obtained color value is used to realize functions like this – there is a picture in the container. It is hoped that the background color can adapt to the main color of the picture, such as:

Everyone gave advice. Some said they used canvas for computing, and some recommended special open source libraries. They were all very good.

So, can you realize this function by using CSS?

It sounds like a bit of a dream. Can CSS still achieve this effect? EMM, we can use CSS to approximately obtain the main color of the picture in a clever way. When the requirements for the main color are not particularly accurate, it is a way. Let’s explore it.

Use filter: blur() and transform: sacle() to obtain the theme color of the picture

Here, we can approximate the theme color of the picture by using the blur filter and magnification effect.

Suppose we have such a picture:


<div></div>

Use the blur filter to the picture:


div {
    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
    background-size: cover;
    filter: blur(50px);
}

To see the effect, we put the picture through a larger blur filterblur(50px), the blurred image feels a little like that, but there are some blurred edges. Try to use themoverflowCrop.

Next, we need to remove the blurred edges and pass throughtransform: scale()Zoom in, refocus the color, and slightly modify the code:

div {
    position: relative;
    width: 320px;
    height: 200px;
    overflow: hidden;
}

div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1");
    background-size: cover;
    //Core code:
    filter: blur(50px);
    transform: scale(3);
}

The results are as follows:

In this way, we use CSS to get the main color of the picture, and the effect is still good!

The complete code you can stamp here:CodePen Demo — Get the main color of the image by filter and scale

deficiencies

Of course, the scheme also has some small problems:

Can only roughly get the main color of the picture, can not be very accurate, andfilter: blur(50px)this50pxSome debugging is required. The fuzzy filter itself consumes performance. If there are multiple backgrounds obtained by this method on a page, it may have a certain impact on the performance. Some trade-offs need to be made in actual use

last

Well, this article ends here and introduces a little skill of using CSS to obtain picture theme color. I hope it will be helpful to you

Thank the students who introduced this method–XboxYan, the ICSS wechat group is very active and has gathered a group of CSS leaders. Students who want to join the group to discuss technology can add my wechat coco1s (because the group has more than 200 people, they can’t scan the code to join the group, so they can only invite)

More wonderful CSS technical articles are summarized in myGithub — iCSS, continuously updated. Welcome to a star subscription collection.

This is the end of this article about parsing CSS to extract picture theme color. For more information about CSS to extract picture theme color, please search previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!