next.js图像是透明的

Question

我使用的是next.js和react。

我正在使用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;
  }
}

Answer 1

  background-blend-mode: hard-light;

这是用来混合两个项目在一起，并将使其半透明。移除它，它将不再是透明的

https://www.w3schools.com/cssref/pr_background-blend-mode.asp