如何只混合<section>的背景而不混合内容

Answer 1

您可以使用伪元素来创建所需的背景。

.bg {
  background-color: blue;
}

.section {
  position: relative;
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(189deg, rgba(89,73,219,1) 0%, rgba(225,233,242,1) 62%);
  mix-blend-mode: color-dodge;
}

.text-white {
  font-color: white;
}

<div class="bg">
    <section class="section">
           <div id="content">
               <div class="text-white">TEST</div>
                  <div class="text-white">TEST</div>
                  <div class="text-white">TEST</div>
                  <div class="text-white">TEST</div>
                  <div class="text-white">TEST</div>
           </div>
    </section>
</div>