Vue中如何实现图片的混合和图层效果？

<template>  <div class="image-layer">    <img  :src="imageSrc" class="background-image" alt="Vue中如何实现图片的混合和图层效果？" >    <div class="overlay-layer"></div>  </div></template><script>export default {  name: 'ImageLayer',  data() {    return {      imageSrc: 'path/to/image.jpg'    }  }}</script><style scoped>.image-layer {  position: relative;  width: 500px;  height: 300px;}.background-image {  width: 100%;  height: 100%;}.overlay-layer {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.5);}</style>

<template>  <div class="app">    <h1>图片混合和图层效果</h1>    <ImageLayer></ImageLayer>  </div></template><script>import ImageLayer from './ImageLayer.vue'export default {  name: 'App',  components: {    ImageLayer  }}</script><style>.app {  text-align: center;}</style>