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

【问题标题】：Color opacity on an image background图像背景上的颜色不透明度
【发布时间】：2021-10-26 22:15:14
【问题描述】：

我需要在该图像上制作带有图像和透明颜色的背景，但我不知道该怎么做。这是我的代码，我尝试了几次更改，有人可以帮助我吗？我正在使用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>
    );
  }

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

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

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

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

参考文档：

【讨论】：

谢谢，但我想在图像顶部添加颜色，这就是应用不透明度的地方
抱歉刚刚编辑了我的答案来解释颜色。嗯我现在明白了，我似乎找到了一个类似的问题，有一个可以帮助的解决方案> stackoverflow.com/questions/64663368/…

【解决方案2】：

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

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

【讨论】：

它不起作用，我有一个女人的形象，我需要在上面放一个 opacity-80 的橙色
看看这个。 tailwindcss.com/docs/background-opacity