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

【问题标题】：My transition doesn't work on FireFox though it works perfectly on Edge and Chrome尽管在 Edge 和 Chrome 上完美运行，但我的转换在 FireFox 上不起作用
【发布时间】：2021-09-16 18:02:22
【问题描述】：

虽然在 Edge 和 Chrome 上完美运行，但我的转换在 FireFox 上无法运行。

我尝试在 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>

非常感谢您帮助我！

【问题讨论】：

Firefox 可能不支持。 stackoverflow.com/questions/9483364/…
检查这是否有帮助 stackoverflow.com/questions/19808764/…
这能回答你的问题吗？ transition for background-image in firefox?

标签： html css firefox transition

【解决方案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>

【讨论】：