解析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制作精致的照片墙特效
Jun 07 HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 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
第十二节--类的自动加载
2006/11/16 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
广告代码静态化js通用函数
2007/05/09 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
javascript 闭包
2011/09/15 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
python的dict判断key是否存在的方法
2020/12/09 Python
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
小学生安全保证书
2014/02/01 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
清洁工个人总结
2015/03/04 职场文书
运动会加油稿50字
2015/07/21 职场文书
python 调用js的四种方式
2021/04/11 Python
vue使用echarts实现折线图
2022/03/21 Vue.js
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫