与下方图像的尺寸和位置完全相同的叠加

Question

我在 nuxt 模板中有一张图像。我希望叠加层具有精确的图像大小和位置。我事先不知道图像的长宽比。

<template>
  <div>
    <div class="overlay"></div>
    <img class="img" :src="image?.imageSrc" :alt="image?.id" />
  </div>
</template>

<script setup lang="ts">
import { Image } from "~/types/interfaces/image";

defineProps({
  image: {
    type: Object as () => Image | undefined,
    default: () => ({}) as Image,
  },
});
</script>

<style scoped lang="scss">
.overlay {
  background-color: green;
}

.img {
  max-width: 100%;
  max-height: 100%;
}
</style>

Answer 1

在

img class

和

overlay class

的父div中添加类名。

<template>
    <div class="box">
        <div class="overlay"></div>
        <img class="img" :src="image?.imageSrc" :alt="image?.id" />
    </div>
</template>

为

CSS

和

box div

添加

overlay div

，如下所示，

.box {
    position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: green;
    opacity: 0.7;
}

.img {
    max-width: 100%;
    max-height: 100%;
}

您将看到绿色覆盖图像的大小。您还可以通过更改

box div

的大小来使用自定义图像尺寸

图片：