Next.js 画像が透けてしまう。

Question

next.jsとreactを使っています。
スタイルはsassを使っています。
after擬似要素を使ってdivタグと画像を重なった風にしたいです。(画像が前、擬似要素が後ろです)
しかし画像の後ろにある擬似要素が透けて見えてしまいます。
opacityを使っていないのになぜ透けてるのかがよくわかりません。
わかる人いましたらご教授お願いしたいです。

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;
  }
}

Answer 1

spanにtransformがあるため、スタッキングコンテキストが生成されています。

div,
span,
img {
  &.z-index-10 {
    z-index: 10;
  }
}

などとして、spanにz-indexを持たせればいいかと思います。

Comments

[kakedashidesu]

ありがとうございます！
解決できました