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

2024-05-17 • 问答

我的过渡在 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>

非常感谢您帮助我！

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

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

.background::after {
  width: 1280px;
  height: 720px;
  content: "";
  background-image: linear-gradient(270deg,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 上运行良好

iCMS 回答：我的转换在 FireFox 上不起作用，尽管它在 Edge 和 Chrome 上运行良好

大家都在问