我的转换在 FireFox 上不起作用，尽管它在 Edge 和 Chrome 上完美运行

Question

我的转换在 FireFox 上不起作用，尽管它在 Edge 和 Chrome 上完美运行。

我试图在 Google 上搜索这个问题，但仍然无法解决。

这是我的代码：

.background{
  width: 1280px;
  height: 720px;
  margin: 200px auto;
  background-image: url(../img/hinh2.png);
  -webkit-transition: background-image 1s ease-in-out;
  -o-transition: background-image 1s ease-in-out;
  -moz-transition: background-image 1s ease-in-out;
  transition: background-image 1s ease-in-out;
  background-size: contain;
}
.background:hover{
  width: 1280px;
  height: 720px;
  margin: 200px auto;
  background-image: url(../img/hinh1.png);
  background-size: contain;
}

<div class="background"></div>

非常感谢您的帮助！

Answer 1

Firefox 似乎还不支持 background-image 上的转换。使用 :before 或 :after 伪元素是一种可能的解决方案：

.background {
  width: 1280px;
  height: 720px;
  margin: 200px auto;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
  background-size: contain;
}

.background::after {
  width: 1280px;
  height: 720px;
  content: "";
  background-image: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);
  background-size: contain;
  z-index: 1;
  position: absolute;
  transition: 1s ease-in-out opacity;
  opacity: 0;
}

.background:hover::after {
  opacity: 1;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Background hover</title>
</head>

<body>
  <div class="background"></div>
</body>

</html>

我的转换在 FireFox 上不起作用，尽管它在 Edge 和 Chrome 上完美运行

My transition doesn't work on FireFox though it works perfectly on Edge and Chrome

html

css

firefox

transition