图像背景上的颜色不透明度

Question

我需要做一个背景图像和一个透明的颜色在该图像上，但我不知道怎么做。这是我的代码，我尝试了几次修改，有人能帮我吗？我使用的是tailwindcss

我有一个女人的图像，我需要把橙色放在这个图像的上面，这个颜色必须有80的不透明度

export default function Header({ children }) {
    return (
      <div className="bg-woman-img bg-center ">
          <div className="relative pt-6 px-4 sm:px-6 lg:px-12">
            <Nav />
            <div className="px-4 py-44 md:py-20">{children}</div>
          </div>
      </div>
    );
  }

Answer 1

试试这个吧。在本例中，Opacity为80

 <div className="bg-woman-img bg-center bg-80">

Answer 2

对于TailWindCSS的不透明度为80，您可以在要应用它的div标记上使用opacity-80。

<div className="bg-woman-img bg-center opacity-80">

要使背景变为橙色，您可能必须向tailwindconfig文件添加自定义颜色，因为TailWindCSS没有基础橙色。但是从文档上看，bg-yellow-500看起来最接近。

参考文档：

• https://tailwindcss.com/docs/opacity
• https://tailwindcss.com/docs/background-color