前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)

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

前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)_第1张图片
前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)_第2张图片

话不多说,直接上代码!非常简单

轮播图代码就不放上去了,直接使用插件 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>

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

前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)_第3张图片

你可能感兴趣的:(前端学习记录,前端,css)