页面中修改el-menu

设置background-color="transparent"，menu菜单下的背景图片则能正常显示了

 <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="transparent">
        <el-menu-item index="1">
          <img :src="require('~@assets/imgs/menu_logo_1.png')" />
          菜单1
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <img :src="require('~@assets/imgs/menu_logo_2.png')" />
            菜单2
          </template>
          <el-menu-item index="2-1">子菜单1</el-menu-item>
          <el-menu-item index="2-2">子菜单2</el-menu-item>
          <el-menu-item index="2-3">子菜单3</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">
          <img :src="require('~@assets/imgs/menu_logo_3.png')" />
          菜单3
        </el-menu-item>
        <el-submenu index="4">
          <template slot="title">
            <img :src="require('~@assets/imgs/menu_logo_4.png')" />
            菜单4
          </template>
          <el-menu-item index="3-1">子菜单</el-menu-item>
        </el-submenu>
        <el-menu-item index="5">
          <img :src="require('~@assets/imgs/menu_logo_5.png')" />
          菜单5
        </el-menu-item>
        <el-submenu index="6">
          <template slot="title">
            <img :src="require('~@assets/imgs/menu_logo_6.png')" />
            菜单6
          </template>
          <el-menu-item index="6-1"></el-menu-item>
          <el-menu-item index="6-2"></el-menu-item>
          <el-menu-item index="6-3"></el-menu-item>
        </el-submenu>
        <el-menu-item index="7">
          <img :src="require('~@assets/imgs/menu_logo_7.png')" />
          菜单7
        </el-menu-item>
      </el-menu>

页面中加了scoped，使用穿透样式修改el-menu样式

   :deep(.el-menu) {
    .el-menu-item {
      font-size: 16px;
      color: #ffffff;
      font-weight: bold;
      background-color: transparent !important;
    }
    img {
      margin-right: 4px;
    }
    .el-submenu__title {
      font-size: 16px;
      color: #ffffff;
      font-weight: bold;
      background-color: transparent !important;
      i {
        color: #ffffff;
        font-weight: bold;
        margin-left: 3px;
      }
    }

    .el-submenu__title:hover,
    .el-submenu.is-active {
      background-image: linear-gradient(to bottom, #0cbfbd, #4fd5c6);
      background-color: transparent;
      border-bottom-color: #4beed4 !important;
      border-bottom: 2px solid #4beed4;
    }
    .el-menu-item:not(.is-disabled):hover,
    .el-menu-item:not(.is-disabled):focus {
      background-image: linear-gradient(to bottom, #0cbfbd, #4fd5c6);
    }
  }

全局样式中添加样式，因为子菜单的dom是插入body下面的

/* menu子菜单区域 */
.el-menu--popup {
  /* 菜单偏上一点 */
  margin-top: -8px !important;
  border-radius: 6px !important;
  background-image: linear-gradient(0deg, #eafefc 0%, #a8e9e2 100%);
  padding: 10px 0px !important;
  .el-menu-item {
    color: #333333 !important;
    background-color: transparent !important;
    margin: 0 10px;
    border-radius: 4px;
    transition-duration: 0s;
  }
  .el-menu-item:hover {
    color: #008d85 !important;
    background-color: #e9faf8 !important;
    filter: drop-shadow(0px 1px 0px #1dbea1);
    background-color: #ffffff;
  }
  .el-menu-item.is-active {
    color: #008d85 !important;
    background-color: #e9faf8 !important;
    filter: drop-shadow(0px 1px 0px #1dbea1);
    background-color: #ffffff;
  }
}

/* menu子菜单区域添加箭头 */
.el-menu--popup.el-menu--popup-bottom-start::before {
  content: '';
  position: absolute;
  top: -15px; /* 控制箭头的位置 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #a7e9e1 transparent;
}