css图片颜色提取(解析CSS 提取图片主题色功能小技巧)
css图片颜色提取
解析CSS 提取图片主题色功能小技巧背景起因是微信技术群里有个同学发问,有什么方法能够获取图片的主色呢?有一张图片,获取他的主色调:
利用获取到的这个颜色值,来实现类似这样的功能 -- 容器中有一张图片,希望背景色可以适配图片的主色,像是这样:
大家出谋划策,有说利用 Canvas 进行计算的,有推荐专门的开源库的,都挺好。
那么,利用 CSS,能不能实现这个功能呢?
听起来好像有点痴人说梦,CSS 还能实现这个效果?emm,利用 CSS 确实可以通过一种讨巧的方式,近似的获取到图片的主色调,在对主色的要求不是特别精确的情况下,不失为一种办法,下面一起来一探究竟。
利用 filter: blur() 及 transform: sacle() 获取图片主题色
这里,我们利用模糊滤镜以及放大效果,可以近似的拿到图片的主题色。
假定我们有这样一张图片:
<li></li>
利用模糊滤镜作用给图片:
li { background: url("https://i0.wp.com/airlinkalaska.com/wp-content/uploads//aurora-2.jpg" alt="css图片颜色提取(解析CSS 提取图片主题色功能小技巧)" border="0" />
看看效果,我们通过比较大的一个模糊滤镜,将图片 blur(50px)
,模糊之后的图片有点那感觉了,不过存在一些模糊边缘,尝试利用 overflow
进行裁剪。
接下来,我们需要去掉模糊的边边,以及通过 transform: scale()
放大效果,将颜色再聚焦下,稍微改造下代码:
li { position: relative; width: 320px; height: 200px; overflow: hidden; } li::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" alt="css图片颜色提取(解析CSS 提取图片主题色功能小技巧)" border="0" />
结果如下:
这样,我们就利用 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 提取图片主题色内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
- css样式退出效果(纯css实现选中切换效果的示例)
- css怎么设置div边框(div+css实现带箭头的面包屑导航栏)
- css清除浮动
- css无效的常见原因
- css3行内样式表图解(详解css3自定义滚动条样式写法)
- css43个基本技巧(必须掌握10个非常不错的CSS技巧)
- css3常用特性(css3学习之2D转换功能详解)
- html和js代码结合(JS、CSS和HTML实现注册页面)
- css3伸缩布局及图解(利用CSS3实现自定义滚动条代码分享)
- css3基础入门(详解使用CSS3的@media来编写响应式的页面)
- css 自适应手机屏幕(Css实现手机端页面强制横屏的方法示例)
- css绝对布局和相对布局(如何理解 CSS 布局和块级格式上下文)
- css中width:auto和width:100%的区别
- css3最新特效(CSS3实现的文字弹出特效)
- css宫格布局(CSS实现页面九宫格布局的简单示范)
- css如何做出矩形三角流程效果(css做个波浪悬浮球的实现方法)
- 休闲VS新古典 办公家居简约设计(办公家居简约设计)
- 15个新成 园 位置公布 深圳龙岗2022年共建花园建设又有大动作(15个新成园位置公布)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
- 富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元 | 美通社(富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元)
- 二次创业 的富士胶片,在进博会上首次展示完成转型后的全线医疗产品(二次创业的富士胶片)
- 富士胶片 中国 我们对上海的信心没有任何改变(富士胶片中国)
热门推荐
- python中for语句的无限循环(python使用for循环计算0-100的整数的和方法)
- mac更改mysql密码(Mac下mysql 8.0.22 找回密码的方法)
- nodejs实现websocket服务端(Node.js+express+socket实现在线实时多人聊天室)
- react常见问题(React编程中需要注意的两个错误)
- jupyternotebook搭建和使用(Jupyter Notebook运行JavaScript的方法)
- docker容器启动执行脚本(在docker容器中使用非root用户执行脚本操作)
- 虚拟主机管理系统干什么用(五大免费主机管理系统优缺点对比及推荐)
- 宝塔面板怎么用ip访问站点(宝塔面板设置禁止通过IP直接访问网站防止恶意解析)
- word-wrap和break-word的区别
- css分割线使用教程(css实现文章分割线样式的多种方法总结)