一种彩色渐变背景的实现方案

参考:mfuns

效果:

/static/e929818976954853d158d290f0e2e1aa8a5664c0279cc538f0eb4f29bd41bbd6.png

/static/4b10071920baa24c17b9f9a52468963d57af331a1a5a24c80825277b10167c1b.png

代码:

<div class="canvas">

<div class="backdrop" />

</div>

.canvas{

width: 100%; height: 100vh;

    background-color: #f8f9fb; //这个颜色效果好,推荐这个

  }

  .backdrop {

    width: 100%; height: 100vh;

    background-image: url(a.jpg); //背景图片

    background-size: cover;

    filter: blur(50px); //按需

    mix-blend-mode: color;

}

参考图[设为背景比较好看的]

/static/a997654f628237c2ac2c0c081d8b65432f2810a0a473570ec6575fe033ecde02.png

/static/8712cf58b245a948711bda6c821f5900b2d22bbb4e0032d83e06f94fbcfabfa9.jpg

发布评论
全部评论(1)
最新
最早
加载中...