Изображение next.js прозрачное

Я использую next.js и реагирую.
Я использую sass для стилизации. Я хочу использовать псевдоэлемент after, чтобы он выглядел так, как будто тег div и изображение перекрываются. (Изображение впереди, а псевдоэлемент сзади.)
Однако изображение прозрачное, и я могу видеть псевдоэлементы позади изображения. Я не знаю, почему он прозрачный, если я не использую непрозрачность.

const Index: FunctionComponent = () => {
  return (
    <>
      <div className = "bg-index height-100vh">
        <div className = "frame">
          <span className = "absolute z-index-10 top-10 left-10 transform">
            <Image
              src = "/peach.jpg"
              alt = "peach"
              className = "background-no-repeat absolute z-index-10"
              width = {200}
              height = {200}
            />
          </span>
        </div>
      </div>
    </>
  );
};

export default Index;

// position
div,
img,
span {
  &.absolute {
    position: absolute;
  }
  &.top-200 {
    top: 100px;
  }

  &.right-100 {
    right: 160px;
  }
  &.transform {
    transform: rotate(-15deg);
  }
}

//

// z-index
div,
img {
  &.z-index-10 {
    z-index: 10;
  }
}
//backgroundColor
div {
  &.bg-index {
    background-color: #ecd3e8;
  }
  &.background-no-repeat {
    background-repeat: no-repeat;
  }
}

// height
div {
  &.height-100vh {
    height: 100vh;
  }
}

div {
  &.frame::after {
    position: absolute;
    display: block;
    content: '';
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    box-shadow: 0 4px 10px rgba(51, 51, 51, 0.3);
    background: rgba(221, 221, 221, 0.25);
    background-blend-mode: hard-light;
    z-index: 1;
  }
}