Parse CSS to extract image theme color function (tips)

background

It all started when a classmate in the WeChat technical group asked, "Is there any way to get the main color of a picture?" There is a picture, get its main color:

Use the obtained color value to implement a function like this - there is a picture in the container, and you want the background color to match the main color of the picture, like this:

Everyone offered suggestions. Some suggested using Canvas for calculations, while others recommended specialized open source libraries. Both were good.

So, can this function be achieved using CSS?

It sounds like a pipe dream. Can CSS achieve this effect? Emm, using CSS can indeed get the approximate main color of the image in a pleasing way. When the requirement for the main color is not particularly precise, it is a good method. Let's take a look at it together.

Use filter: blur() and transform: sacle() to get the theme color of the image

Here, we use the blur filter and magnification effect to get the approximate theme color of the image.

Suppose we have a picture like this:

<div></div>

Apply a blur filter to the image:

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

Let's take a look at the effect. We use a relatively large blur filter to blur(50px) . The blurred image has a bit of that feeling, but there are some blurred edges. Try to use overflow to crop it.

Next, we need to remove the blurred edges and amplify the effect through transform: scale() to focus the color again. We can modify the code slightly:

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 pretty good!

You can find the complete code here: CodePen Demo -- Get the main color of the image by filter and scale

Disadvantages

Of course, this solution also has some minor problems:

You can only roughly get the main color of the image, not very accurately, and the 50px filter: blur(50px) needs some debugging. The blur filter itself consumes performance. If a page has multiple backgrounds obtained by this method, it may have a certain impact on performance. In actual use, you need to make certain trade-offs.

at last

Well, this article ends here. I introduced a trick to get the theme color of the image using CSS. I hope it will be helpful to you😃

Thanks to XboxYan, a student from Yuewen, who proposed this method. The iCSS WeChat group is very active and has gathered a bunch of CSS experts. Students who want to join the group to discuss technology can add my WeChat coco1s (because the group has more than 200 people, you can't scan the code to join the group, you can only invite)

More wonderful CSS technical articles are collected in my Github -- iCSS. They are continuously updated. Welcome to click a star to subscribe and collect.

This is the end of this article about parsing CSS and extracting image theme colors. For more relevant CSS extraction of image theme colors, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!