Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use CSS to obtain the theme color of a picture. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Background

The cause is that a classmate in the Wechat technology group asked, is there any way to get the main color of the picture? There is a picture to get his dominant tone:

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

Everyone gives advice, it is said that the use of Canvas for calculation, there are recommended special open source library, are very good.

So, can this function be achieved with CSS?

It sounds like a bit of a dream, CSS can still achieve this effect? emm, using CSS can indeed through a clever way, approximately get the main color of the picture, in the case of the main color is not very accurate, it is a way, let's take a look.

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

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

Suppose we have a picture like this:

Use the blur filter to give 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);}

Look at the effect, we through a larger blur filter, the picture blur (50px), the blurred picture a little bit that feeling, but there are some fuzzy edges, try to use overflow to crop.

Next, we need to remove the blurred edges and zoom in with transform: scale () to 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 tone of the picture, and the effect is still good!

For the complete code, you can stamp here: CodePen Demo-- Get the main color of the image by filter and scale [1]

shortcomings

Of course, there are some minor problems with this scheme:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Can only roughly get the main tone of the picture, can not be very accurate, and filter: blur (50px) this 50px needs to be debugged

The blur filter itself consumes performance. If there are multiple backgrounds obtained by this method on a page, it may affect the performance to a certain extent, and some trade-offs need to be made in actual use.

On "how to use CSS to get picture theme color" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.