解析CSS 提取图片主题色功能(小技巧)


Posted in HTML / CSS onMay 12, 2021

背景

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

解析CSS 提取图片主题色功能(小技巧)

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

解析CSS 提取图片主题色功能(小技巧)

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

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

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

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

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

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

解析CSS 提取图片主题色功能(小技巧)

<div></div>

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

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

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

解析CSS 提取图片主题色功能(小技巧)

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

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;
    // 核心代码:
    filter: blur(50px);
    transform: scale(3);
}

结果如下:

解析CSS 提取图片主题色功能(小技巧)

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

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

不足之处

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

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

最后

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

感谢提出介绍这种方法的阅文的同学 -- XboxYan,iCSS 微信群非常活跃,聚集了一帮 CSS 大佬,想进群一起讨论技术的同学可以加我微信 coco1s(因为群超过了 200 人,不能扫码进群,只能邀请了)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

到此这篇关于解析CSS 提取图片主题色功能的文章就介绍到这了,更多相关CSS 提取图片主题色内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 特效范例整理
Aug 22 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 HTML / CSS
为什么你写的height:100%不起作用
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 #HTML / CSS
background-position百分比原理详解
不要在HTML中滥用div
css display table 自适应高度、宽度问题的解决
CSS 新特性 contain控制页面的重绘与重排问题
CSS3新特性详解(五):多列columns column-count和flex布局
You might like
php 清除网页病毒的方法
2008/12/05 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
php输出xml属性的方法
2015/03/19 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
python之import机制详解
2014/07/03 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
详解django中使用定时任务的方法
2018/09/27 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
学生未请假就回家检讨书
2014/09/22 职场文书
转让协议书
2015/01/27 职场文书
元旦主持词开场白
2015/05/29 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
配置nginx负载均衡
2022/05/06 Servers