TailwindCSS v4中如何避免文字继承背景div的透明度？

问题出在你给包含背景图和文字的父div加了opacity-40——CSS里父元素的透明度会直接作用于所有子元素，子元素单独加opacity-100没用，因为子元素的透明度是基于父元素的数值计算的，最终还是40%的透明度。

正确的做法是把背景图的透明度单独分离出来，不要给整个容器加透明度：

• 把背景图放到一个独立的背景层元素（或伪元素）上
• 给这个背景层设置opacity-40，仅影响背景图
• 父容器保留布局相关样式，移除原来的opacity-40，文字子元素保持原有样式即可

修改后的代码（用独立div做背景层） #

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="relative">
  <div class="absolute inset-0 min-h-[600px] w-full md:w-3/4 mx-auto my-2 border border-4 border-green-900 rounded-md flex items-center justify-center">
    <!-- 独立背景层，仅背景图透明 -->
    <div class="absolute inset-0 bg-no-repeat bg-cover opacity-40" style="{{ addShadow() }}; background-image: url(https://picsum.photos/1000/600);"></div>
    <!-- 文字层不受透明度影响，加z-10确保在背景层上方 -->
    <div class="my-auto text-center relative z-10">
      <div class="my-auto text-4xl text-black font-extrabold ">Welcome</div>
    </div>
  </div>
</div>

另一种写法（用CSS伪元素，更简洁） #

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="relative">
  <div class="absolute inset-0 min-h-[600px] w-full md:w-3/4 mx-auto my-2 border border-4 border-green-900 rounded-md flex items-center justify-center">
    <div class="my-auto text-center relative z-10">
      <div class="my-auto text-4xl text-black font-extrabold ">Welcome</div>
    </div>
  </div>
  <style>
    .relative > div::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url(https://picsum.photos/1000/600);
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.4;
      border-radius: 0.375rem; /* 对应Tailwind的rounded-md */
      {{ addShadow() }}
    }
  </style>
</div>

两种写法都能实现背景图透明但文字完全不透明的效果，按需选择即可。

内容的提问来源于stack exchange，提问作者Jim