主页 / user-18242790

Casio Production's questions

Martin Hope
Casio Production
Asked: 2025-04-06 22:42:22 +0800 CST
  • 6

我好像没法让这个 CSSmix-blend-mode工作。即使z-index设置好了，它还是不行。我试了所有颜色，还是不行。

你能帮我找出问题所在吗？

片段：

.hero {
  width: 100%;
  height: 70dvh;
  position: relative;
}

.hero .background {
  background: linear-gradient(to right, #2472FE, #06A9B2);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
}

.hero .foreground {
  background-color: white;
  height: 50%;
  width: 100%;
  position: absolute;
  background-position: 0;
  background-repeat: no-repeat;
  display: flex;
  z-index: 2;
}

.hero .foreground .container {
  left: 4vw;
  top: 50%;
  transform: translateY(-25%);
  display: flex;
  position: relative;
  flex-direction: column;
}

.hero .foreground .container>* {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.hero .foreground .container>h1 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 4rem;
  max-width: 70%;
  color: #0044bb;
  mix-blend-mode: difference;
}
<section class="hero">
  <div class="background">
    <div class="background-numbers">
      <!-- Numbers will be generated by JavaScript -->
    </div>
  </div>
  <div class="foreground">
    <div class="container">
      <h1>Sii <b>sempre</b> un passo avanti ai tuoi competitors.</h1>
    </div>
  </div>
</section>

尝试用您想要的每种颜色进行更改，您会发现它不会改变。

html