前端，CSS，背景颜色跟随轮播图片改变而改变（附源码）

首先看效果！
比如轮播图时红色，那么背景的底色也是红色，轮播图时黄色，背景的底色也是黄色，这就是根据轮播图的图片切换，而改变背景颜色随轮播图颜色一致

话不多说，直接上代码！非常简单

轮播图代码就不放上去了，直接使用插件 swiper ，选择你喜欢的版本 就可以了
在轮播图的位置 放置一个 div

 <div class="backgroundChange display-{{count}}" style="background-image: url('{{poster.src}}'); display: none;">

<style>
.backgroundChange{
  height: 200px;
  position: absolute;
  width: 100%;
  opacity: .3;
  filter: blur(100px);
}
style>

只需要简短的代码，就可以完成上面的效果，是不是很简单！！！