Firefox中背景图像的过渡？

Posted 2023-03-06

【中文标题】Firefox中背景图像的过渡？

【英文标题】：transition for background-image in firefox?

【发布时间】：2013-11-17 11:51:44

【问题描述】：

我正在尝试为此寻找替代方案：

"transition:background-image 1s whatever"

在 firefox 中，因为它只适用于 webkit 浏览器。

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

谢谢。

【问题讨论】：

CSS3 Background image Transition 的可能重复项

不，这不是因为那里提供的解决方案存在不透明性，正如我在帖子中所说的那样，这对我不起作用。

检查这个答案：***.com/a/16619705/1873387 看起来firefox还没有实现它。

我认识那个人，所以我要找一个替代品。

【参考方案1】：

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

 

.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>

【参考方案2】：

你可以使用 2 个伪元素来做到这一点

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;

fiddle with real images

（悬停过渡）

为了能够看到 div 内容，伪元素需要在负 z-index 中：

fiddle with corrected z-index

看起来 IE 不会触发此悬停

.test:hover:before 
    opacity: 0;

但会触发这个

.test:hover 

.test:hover:before 
    opacity: 0;

（看起来很傻）

fiddle for IE10

【讨论】：

嗨，看起来不错，但我不能在 div 中放置内容？

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

哇，完美运行！谢谢你。现在就像奖金一样。它适用于最新版本的 IE 吗？我有 9，它在这里不起作用。并不是说我很在意，因为 IE 很烂。

尝试 10 分钟后，让它与 IE10 一起工作。希望它也适用于 9 ..

哇，Explorer 真是一坨屎。我不敢相信有必要想出很多奇怪的代码才能让事情在那里工作。似乎它不适用于 explorer 9。但没关系，我很久以前就放弃了 explorer。非常感谢您的帮助。

【参考方案3】：

#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;

这不行吗？只需要将全部更改为背景图像即可。

【讨论】：

不，它没有。 Firefox 不支持背景图像的过渡。这就是为什么我要求另一种选择。

据我所知，似乎还没有解决方法。

2021年底了，FF还是还不支持！ ?

【参考方案4】：

确实有效

你可以在这里看到它：http://dabblet.com/gist/1931619

但显然 Firefox 还没有实现它。

【讨论】：

谢谢，但这就是我的问题所在。由于 ti 在 Firefox 上不起作用，我正在寻找替代品。

@CainNuke 好的，抱歉。我想你唯一能做的就是有一个空的 div 只包含背景图像和顶部的另一个 div 包含内容......我想不出另一种选择。

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

不，你只将过渡应用到包含背景图片的 div，没有别的

你是怎么做到的？当我将 div 中的所有内容都消失时，不仅仅是背景。