在el-tabs组件中设置背景图片调整模糊和透明度 并且不被下一级继承

 

  <el-tabs :tab-position="tabPosition" style="height: 200px" class="demo-tabs">
        //先设置背景图
        <div class="tab-background-image"></div>
    // tabs 文本
    <el-tab-pane label="User"><p class="text-wrapper">aaa</p>User</el-tab-pane>
    <el-tab-pane label="Config"><p class="text-wrapper">aaa</p>Config</el-tab-pane>
    <el-tab-pane label="Role"><p class="text-wrapper">aaa</p>Role</el-tab-pane>
    <el-tab-pane label="Task"><p class="text-wrapper">aaa</p>Task</el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const tabPosition = ref('left')
</script>
<style>
.tab-background-image {
//背景图给绝对定位
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('@/assets/images/laal.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(2px);
    opacity: 0.75;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
.text-wrapper {
   
    white-space: pre-wrap;
    overflow-wrap: break-word;
    white-space: normal;
    letter-spacing: 3px;
    color: black;
    font-size: 25px;
    font-weight: 500;
   //文本给相对定位
    position: relative;
}
</style>