顺风背景图像不透明度过渡

Question

在我的网页中，我正在尝试使用

bg-[url('path')]

更改为 div 提供背景图像我有一个具有对象数组的 React 组件，其中一些对象具有名为

color

的属性根据内容的类型更改容器的样式。在这种情况下，我试图将以下 Tailwind 样式作为道具传递给我的 DesignGame 组件，作为要应用的

color

类。

hover:bg-opacity-100 bg-[url('path')] bg-opacity-0

function DesignGame({GraphicDesign}) {
  const {image, alt, color} = GraphicDesign;

  return (
    <Link className={"project " + color}>
        <img src={image} alt={alt}/>
    </Link>
  )
}

.project

CSS 类具有以下 Tailwind 实用程序类：

flex items-center justify-center min-h-[20vh] border-[#ffffff] border-2 w-[1fr] duration-500 bg-cover bg-center transition-all

我正在尝试为容器提供过渡动画，其中当用户将鼠标悬停在组件上时背景图像不透明度会发生变化，但由于某种原因它不会响应过渡时间。

我曾尝试使用

bg-opacity

实用程序类，但它会在页面加载后立即显示图像并保持这种状态。我已经阅读了 Tailwind 文档，但我还没有找到解决方案。