小技巧!CSS 提取图片主题色功能探索

开发 前端
本文将介绍一种利用 CSS 获取图片主题色的小技巧。一起看看~

[[398289]]

本文将介绍一种利用 CSS 获取图片主题色的小技巧。一起看看~

背景

起因是微信技术群里有个同学发问,有什么方法能够获取图片的主色呢?有一张图片,获取他的主色调:

利用获取到的这个颜色值,来实现类似这样的功能 -- 容器中有一张图片,希望背景色可以适配图片的主色,像是这样:

大家出谋划策,有说利用 Canvas 进行计算的,有推荐专门的开源库的,都挺好。

那么,利用 CSS,能不能实现这个功能呢?

听起来好像有点痴人说梦,CSS 还能实现这个效果?emm,利用 CSS 确实可以通过一种讨巧的方式,近似的获取到图片的主色调,在对主色的要求不是特别精确的情况下,不失为一种办法,下面一起来一探究竟。

利用 filter: blur() 及 transform: sacle() 获取图片主题色

这里,我们利用模糊滤镜以及放大效果,可以近似的拿到图片的主题色。

假定我们有这样一张图片:

  1. <div></div> 

利用模糊滤镜作用给图片:

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

看看效果,我们通过比较大的一个模糊滤镜,将图片 blur(50px),模糊之后的图片有点那感觉了,不过存在一些模糊边缘,尝试利用 overflow 进行裁剪。

接下来,我们需要去掉模糊的边边,以及通过 transform: scale() 放大效果,将颜色再聚焦下,稍微改造下代码:

  1. div { 
  2.     position: relative
  3.     width: 320px; 
  4.     height: 200px; 
  5.     overflow: hidden; 
  6.  
  7. div::before { 
  8.     content: ""
  9.     position: absolute
  10.     top: 0; 
  11.     left: 0; 
  12.     right: 0; 
  13.     bottom: 0; 
  14.     background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg?resize=1024%2C683&ssl=1"); 
  15.     background-size: cover; 
  16.     // 核心代码: 
  17.     filter: blur(50px); 
  18.     transform: scale(3); 

结果如下:

这样,我们就利用 CSS,拿到了图片的主色调,并且效果还是不错的!

完整的代码你可以戳这里:CodePen Demo -- Get the main color of the image by filter and scale[1]

不足之处

当然,该方案也是存在一定的小问题的:

  1. 只能是大致拿到图片的主色调,无法非常精确,并且 filter: blur(50px) 这个 50px 需要进行一定的调试
  2. 模糊滤镜本身是比较消耗性能的,如果一个页面存在多个这种方法获取到的背景,可能对性能会造成一定的影响,实际使用的时候需要进行一定的取舍

最后

好了,本文到此结束,介绍了一种利用 CSS 获取图片主题色的小技巧,希望对你有帮助 :)

参考资料

[1]CodePen Demo -- Get the main color of the image by filter and scale:

https://codepen.io/Chokcoco/pen/poRBQGg

 

责任编辑:姜华 来源: iCSS前端趣闻
相关推荐

2010-06-12 13:59:42

Eclipse 4.0CSS主题功能切换

2013-07-05 10:09:49

算法可视化Color

2009-08-26 18:15:39

ibmdwFlex

2010-08-06 14:23:25

FlexCSS

2023-05-15 08:18:21

CSS技巧代码

2017-02-24 11:31:17

Android颜色提取Palette

2010-08-26 10:26:44

CSS

2020-12-13 08:43:37

微软Edge浏览器

2021-09-08 11:02:32

Java代码图片

2022-03-10 08:01:06

CSS技巧选择器

2014-11-27 14:55:40

Swift主题色

2022-11-24 10:34:05

CSS前端

2013-03-06 10:03:25

Open WebHTML5CSS3

2023-06-15 10:21:48

CSS前端

2022-06-15 22:15:47

CSS视觉还原

2022-09-26 20:19:05

CSS​技巧JS​

2012-05-08 15:03:53

Windows7库功能

2015-08-10 09:50:21

ios图片文本

2010-09-09 13:44:06

DIVCSS

2010-09-03 14:39:53

CSSCSS样式表
点赞
收藏

51CTO技术栈公众号