解析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 新增选择器的实例
Nov 13 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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页面输出时js设置input框的选中值
2016/09/30 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
js的闭包的一个示例说明
2008/11/18 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
Python变量赋值的秘密分享
2018/04/03 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Python 互换字典的键值对实例
2019/02/12 Python
Python实现某论坛自动签到功能
2019/08/20 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
植物选择:Botanic Choice
2017/02/15 全球购物
荟萃全球保健品:维他购
2018/05/09 全球购物
局域网定义和特性
2016/01/23 面试题
客户代表自我评价范例
2013/09/24 职场文书
高一物理教学反思
2014/01/24 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python