解析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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
html form表单基础入门案例讲解
Jul 15 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生成sitemap.xml地图函数
2013/11/13 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php中smarty区域循环的方法
2015/06/11 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
微信小程序页面开发注意事项整理
2017/05/18 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
python实现数据图表
2017/07/29 Python
Python中类的初始化特殊方法
2017/12/01 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
挂职思想汇报
2013/12/31 职场文书
物业经理自我鉴定
2014/03/03 职场文书
平面设计师岗位职责
2014/09/18 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
硕士论文致谢范文
2015/05/14 职场文书
小学见习报告
2015/06/23 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python