如何使用TailwindCSS为图片背景添加指定不透明度的彩色遮罩

实现方案 #

你可以通过新增绝对定位遮罩层的方式实现需求，修改后的代码如下：

export default function Header({ children }) {    
  return (      
    <div className="relative bg-woman-img bg-center bg-cover">
      {/* 80%不透明度橙色遮罩 */}
      <div className="absolute inset-0 bg-orange-500/80"></div>
      <div className="relative z-10 pt-6 px-4 sm:px-6 lg:px-12">
        <Nav />
        <div className="px-4 py-44 md:py-20">{children}</div>
      </div>
    </div>
  );  
}

注意事项 #

• 外层背景容器需要加relative定位，确保内部遮罩层可以相对于它铺满整个区域
• inset-0 等价于同时设置 top: 0; right: 0; bottom: 0; left: 0，能快速让遮罩占满父容器
• 如果你使用的是Tailwind v2版本，将bg-orange-500/80替换为bg-orange-500 bg-opacity-80即可
• 内容层必须添加relative z-10，避免内容被遮罩层覆盖
• 补充的bg-cover用于保证背景图适配容器尺寸，不需要可直接删除

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