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中overflow的用法
- css制作磨砂图片(CSS制作梦幻彩虹效果)
- 在css中用属性来实现文字环绕图片(css文字环绕图片—遇到的问题及快速解决方法)
- 简述css3动画与过渡效果(CSS3制作翻转效果_动力节点Java学院整理)
- css3过渡技巧视频(css3过渡_动力节点Java学院整理)
- 制作css3动画应使用哪个样式属性(CSS3中Transform动画属性用法详解)
- css3导航菜单(CSS3实现的侧滑菜单)
- html的css中怎么选择第三个子元素(CSS中 opacity的设置影响了index层数的改变的问题总结推荐)
- css3行内样式表图解(详解css3自定义滚动条样式写法)
- css中background属性介绍
- css垂直居中16个方法(css实现元素垂直居中的常用方法总结)
- 为什么css中float:right后右对齐换行
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- html表单星号怎么标记(使用CSS 给表单必选项添加星号的实现方法)
- css3项目列表属性(像素密度与CSS3的viewport在移动端Web响应式布局中的运用)
- css3特效旋转菜单(CSS3实现的水平标题菜单)
- 英语难学吗(初中英语难学吗)
- 如何追女孩子(如何追女孩子的技巧和方法)
- 是不是快乐全被你拿走了(而是你得到的)
- 世界上只有妈妈好(世界上只有妈妈好的歌词)
- 为什么现在社会越来越卷了(现在社会为什么发展那么快呢)
- 直播带货能赚到很多钱吗(直播带货能赚到很多钱吗现在)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9