在Firefox中如何实现背景图片的过渡效果？

Question

我正在尝试寻找这个的替代方案：

"transition:background-image 1s whatever"

在火狐浏览器上，因为它只适用于Webkit浏览器。

我已经尝试了透明度的替代方案，但对我来说不是一个选项，因为我在背景容器中有内容，如果使用透明度，内容将随着背景一起消失。

谢谢。

- Cain Nuke

---

可能是CSS3背景图像过渡的重复问题。 - Paulie_D

不，那里提供的解决方案是关于不透明度的问题，正如我在帖子中所说，那对我不起作用。 - Cain Nuke

请查看此答案：https://dev59.com/z2kx5IYBdhLWcg3wCP6Y#16619705 看起来Firefox尚未实现它。 - Romain Braun

我认识那个人，所以我正在寻求一个替代方案。 - Cain Nuke

Answer 1

您可以使用两个伪元素来完成这个操作

CSS

.test
{
    width: 400px;
    height: 150px;
    position: relative;
    border: 1px solid green;
}

.test:before, .test:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 1;
}
.test:before {
    background-color: red;
    z-index: 1;
    transition: opacity 1s;
}

.test:after {
    background-color: green;
}

.test:hover:before {
    opacity: 0;
}

使用真实图片的代码示例

(鼠标悬停进行过渡效果)

为了能够看到div内容，伪元素需要具有负的z-index:

已修正z-index的代码示例

看起来IE不会触发这个hover效果

.test:hover:before {
    opacity: 0;
}

但将触发此项

.test:hover {
}
.test:hover:before {
    opacity: 0;
}

< p >（尽管看起来很傻）

< p > 适用于IE10的代码示例

- vals

---

嗨，看起来不错，但我无法将内容放置在 div 中？ - Cain Nuke

你说得对，我忘记检查了。我添加了另一个例子，在那里我将z-index设置为负值并纠正了这个问题。 - vals

哇，它完美地工作了！谢谢。现在只是额外的奖励。它适用于最新版本的IE吗？我有9，但这里它不起作用。虽然我不太关心，因为IE很烂。 - Cain Nuke

尝试了10分钟后，终于让它在IE10上运行了。希望它也能在9上正常工作。 - vals

哇，Explorer 真的是一坨屎。我简直不敢相信为了让事情在那里正常工作需要编写很多奇怪的代码。似乎它在 Explorer 9 上无法正常工作。但没关系，反正我早就放弃使用 Explorer 了。非常感谢你的帮助。 - Cain Nuke

Answer 2

使用悬停的最简单解决方案

 

.self-pic {
    height: 350px;
    width: 350px;
    position: relative;
    border-radius: 1rem;
}

img {
    position: absolute;
    left: 0;
    transition: opacity, 1s;
}

img.front:hover {
    opacity: 0;
}

 

<div id="self-pic">
  <img class="back" src="https://source.unsplash.com/random/350*350" />
  <img class="front" src="https://source.unsplash.com/random/351*351" />
</div>

- RICHARD ABRAHAM

Answer 3

它确实有效

您可以在此处查看：http://dabblet.com/gist/1931619

但显然Firefox尚未实现它。

- Romain Braun

---

谢谢，但这正是我的问题所在。由于它在Firefox上不起作用，我正在寻找替代方案。 - Cain Nuke

@CainNuke 好的，抱歉。我想你唯一能做的就是有一个空的 div，只包含背景图片，另一个 div 放在上面，包含内容... 我想不出其他的替代方案了。 - Romain Braun

是的，但如果你这样做并应用不透明度过渡，那么内容也会消失。 - Cain Nuke

不，你只需将过渡效果应用于包含背景图片的 div 元素，而无需作用于其他元素。 - Romain Braun

你怎么做到的？当我悬停时，div里面的所有东西都消失了，不仅仅是背景。 - Cain Nuke

是的，所以你应该有一个包含div，在那个div里面有一个只包含背景的div，然后在它上面，有一个包含内容的div。这不是很好，但这就是我所拥有的。 - Romain Braun

Answer 4

#id_of_element {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

这样行不通吗？只需要将所有内容更改为背景图片。

- Adam 'Sacki' Sackfield

---

不支持。Firefox 不支持 background-image 的过渡效果，这就是为什么我在寻找替代方案的原因。 - Cain Nuke

据我所知，目前似乎还没有解决此问题的方法。 - Adam 'Sacki' Sackfield

2021年即将结束，但FF仍然不支持它！ - CenterOrbit