Блог

Я использую 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 {
  amp;.absolute {
    position: absolute;
  }
  amp;.top-200 {
    top: 100px;
  }

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

//

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

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

div {
  amp;.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;
  }
}
 

   background-blend-mode: hard-light;
 

это используется для смешивания двух элементов вместе и сделает его полупрозрачным. Удалите его, и оно больше не будет прозрачным

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