CSS：如何从悬停时的背景图片中移除带有过渡效果的色调？

由 发布于

我有以下HTML和CSS示例，其中的图像带有红色。当我将鼠标悬停在其上时，色度将被删除-这是通过再次插入没有色度的图像来实现的。

问题在于它非常瞬时-没有过渡。我试图插入一个过渡，但它似乎不起作用。

div {
  background-image: linear-gradient(to bottom,
      rgba(250, 0, 0, 0.5),
      rgba(250, 0, 0, 0.5)), url("https://homepages.cae.wisc.edu/~ece533/images/cat.png");
  height: 300px;
  width: 300px;
  background-size: 300px;
  transition: all 2s ease-out;
}

div:hover {
  background-image: url("https://homepages.cae.wisc.edu/~ece533/images/cat.png");
  transition: all 2s ease-out;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div>
    
    </div>
  </body>

</html>