此问题已在此处有答案：

Set opacity of background image without affecting child elements（15个回答）
2天前关闭。
如何在不影响节内容的情况下，设置具有设置不透明度的节图像背景？
我尝试将html部分的bg设置为图像，但不透明度为50%，这样您仍然可以看到内容。
这里是一个例子，我尝试了，但它只是使部分内容有50%的不透明度了。
我也试着编辑png本身，使其50%透明，但这没有改变什么。

.welcome-bg {
  background-image: url('https://i.ibb.co/YcX5sSX/output-onlinepngtools.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  opacity: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

<script src="https://cdn.tailwindcss.com"></script>

<section id="introduction" class="bg-white text-gray-900 py-20 border-b border-gray-300 relative">
  <div class="container mx-auto px-4">
    <div class="welcome-bg"></div>
    <div class="welcome-content">
      <h1 class="text-4xl font-bold mb-6">Welcome to AI Universal</h1>
      <p class="text-lg mb-8">AI Universal is an AI-based business that aims to provide easy-to-use and accessible AI technology to users around the world. Our mission is to remove the confusion around AI and allow everyone to use it for good. We provide users with a platform
        for tutoring, learning, homework, and more, making AI technology accessible to a wide audience.</p>
      <button class="bg-gradient-to-r from-blue-500 to-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" onclick="location.href='/signup'">Get Started</button>
      <button class="bg-gradient-to-r from-blue-500 to-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" onclick="location.href='/learn-more'">Learn More</button>
    </div>
  </div>
</section>