<template>
  <div id="bg_img">
    <img
      src="/static/img/pexels-pixabay-209831.jpg"
      alt="叠加图片"
      height="100%"
      width="100%"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {}
};
</script>

<style scoped>
#bg_img {
  width: 100%;
  height: 100vh;
  background: url("../../static/img/pexels-mabel-amber-125457.jpg") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

#bg_img img {
  position: absolute;
  object-fit: cover;
  opacity: 0.4;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>