Vue将图片作为背景并虚化，el-button背景变透明

最新推荐文章于 2025-04-14 13:54:27 发布

愤怒的阿木木

最新推荐文章于 2025-04-14 13:54:27 发布

阅读量7.2k

点赞数

分类专栏： Vue 文章标签： vue elementui

本文链接：https://blog.csdn.net/qq_44364267/article/details/123849509

版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在前端开发中实现虚拟背景效果及透明按钮的方法。通过调整CSS样式，包括模糊滤镜、圆角和绝对定位等属性设置，实现了美观且实用的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下做项目过程中遇到的问题：
在这里插入图片描述

这个虚拟背景和透明的按钮：
虚拟背景：

 <img :src="require('@/render/assets/RotationMap/rotationMap1.jpg')"  class="headerBg" style="border-radius: 5%;">
 <img :src="require('@/render/assets/RotationMap/rotationMap1.jpg')"  class="headerBg2" style="border-radius: 5%">

.headerBg
  -webkit-filter: blur(5px);
  filter: blur(15px);
  width: 100%
  border-radius: 10%
  height 150px
.headerBg2
  position:absolute;
  left:40px;
  top:90px;
  width 130px
  height 130px

透明按钮：这个按钮使用的是element ui的按钮

<el-button round color="#D6A557" style="color:#d68b2a;background-color:transparent;margin-top: 3px;"><el-icon><pointer /></el-icon>精品歌单</el-button>

background-color:transparent;让按钮背景变透明