温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何利用CSS获取图片主题色

发布时间:2021-09-15 17:28:12 来源:亿速云 阅读:264 作者:小新 栏目:web开发

这篇文章将为大家详细讲解有关如何利用CSS获取图片主题色,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

背景

起因是微信技术群里有个同学发问,有什么方法能够获取图片的主色呢?有一张图片,获取他的主色调:

如何利用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[1]

不足之处

当然,该方案也是存在一定的小问题的:

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. 只能是大致拿到图片的主色调,无法非常精确,并且 filter: blur(50px) 这个 50px 需要进行一定的调试

  3. 模糊滤镜本身是比较消耗性能的,如果一个页面存在多个这种方法获取到的背景,可能对性能会造成一定的影响,实际使用的时候需要进行一定的取舍

关于“如何利用CSS获取图片主题色”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI