如何只用一张图片来设置不同的背景图

图1

图2
图1是icon集合，图2是效果

<template>
  <el-row class="app">
    <el-col :span="4" class="content-left">
      <el-menu
        :default-active="getRouter()"
        @select="$router.push($event)"
        active-text-color="#2d8cf0"
        text-color="#515a6e"
      >
        <div v-for="(item, index) in routerList">
          <el-menu-item
            v-if="!item.children"
            :key="item.path"
            :index="item.path"
            ><i></i><span>{{ item.name }}</span>
          </el-menu-item>

          <el-submenu v-else :index="'item' + index">
            <template slot="title">
              <i></i><span>{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="items in item.children"
                :key="(items.path.split('/')).length-1>1?items.path:items.path"
                :index="(items.path.split('/')).length-1>1?items.path:items.path"
                >{{ items.name }}</el-menu-item
              >
                <!-- :index="(items.path.split('/')).length-1>1?items.path:items.path" -->
            </el-menu-item-group>
          </el-submenu>
        </div>
      </el-menu>
    </el-col>
    <el-col :span="20" v-if="!flag" class="content-right">
        <router-view></router-view>
    </el-col>
    <el-col :span="20" v-else class="content-right">
        <!-- 不需要走缓存 -->
        <router-view v-if="!$route.meta.keepAlive"></router-view>
        <!-- 需要走缓存 -->
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      flag:true,
      routerList: [
        {
          name: "评价",
          path: "",
          children: [
            {
              name: "必备条件检查表",
              path: "/evaluate/essentialCondition"
            },
            {
              name: "项目基本信息",
              path: "/evaluate/basicInformation"
            },
            {
              name: "开始评价",
              path: "/evaluate/startEvaluation"
            },
            {
              name: "评价历史",
              path: "/evaluate/evaluatingHistory"
            }
          ]
        },
        {
          name: "报表",
          path: "",
          children: [
            {
              name: "数据导入",
              path: "/evaluate/reportImport"
            },
            {
              name: "查看报表",
              path: "/evaluate/viewReport"
            }
          ]
        }
      ]
    };
  },
  mounted() {},
  methods: {
    getRouter() {
      this.$route.path.indexOf("/evaluate/evaluatingHistory")>=0?this.flag=true:this.flag=false;
      return (this.$route.path.split('/')).length-1>2?this.$route.path.substring(0,this.$route.path.lastIndexOf("/")):this.$route.path
    }
  }
};
</script>

<style scoped>
.app {
  width: 100%;
  height: 100%;
}
.content-left {
  text-align: center;
}
.content-left .el-menu i {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  background-image: url(../../assets/imgs/icon.png);
}
.content-left .el-menu > div:first-child i {
  background-position: -30px 0;
}
.content-left .el-menu > div:last-child i {
  background-position: -60px 0;
}
</style>

上面是这个效果的实现代码，关键就2点
1.
2.backgorund-image和宽高
3.background-position
CSS background-position 属性