网易云音乐虚化图片html,CSS之高斯模糊—（网易云歌单）

最近在用vue仿网易云UI实现一个简单的音乐台项目。在写到歌单的时候卡住了一段时间，发现网易云的UI设计挺高级的(对我来说)，于是花时间研究了一下。先来看下网易云官方ui效果。

网易云歌单.gif

可以看到不同歌单进入时，歌单的背景色是不同的，因为看上去像是纯色的背景，所以我一开始的思路是提取封面的主色调作背景色，就去参考了不少提取主色的算法。提取出来后发现并没有达到想要的效果(背景不是主色调)。有提取图片色调这方面需求的可以参考一下。

算法：提取图片主色调

CSS高斯模糊

寻找其它解决方案的过程中发现很多人提到css高斯模糊，结合伪类能够实现这种效果。于是就尝试了一下，发现确实可以。下面是我的具体实现(单独的测试页面)。

html

fas fa-arrow-left

歌单

class="d_img"

src="https://picsum.photos/414/736?random"

width="120px"

height="120px"

/>

css高斯模糊

栀子花-

通过css高斯模糊，结合伪类能够实现网易云歌单ui效果

暂无数据！

html中有一个class为"d_bg"的空div标签，这个标签是专门用来放背景图片的，不做它用。(在"d_wrapper"元素下，与"d_head"即内容元素为兄弟元素)。

设置父元素相对定位

.d_wrapper{

position: relative; /*设置相对定位*/

overflow: hidden;

height: 15rem;

}

设置背景图片

.d_bg{

background: url("h