在firefox的背景图像的过渡？ [英] transition for background-image in firefox?

问题描述

我想为此寻找替代方法：

transition：background-image 1s whatever

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

我已经尝试过不透明的替代，但这不是一个选项，因为我有背景容器上的内容，如果使用不透明度，它会随背景消失。

谢谢。

解决方案

p>

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不会触发此悬停

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

但会触发此

  .test：hover {
} 
 .test：hover：before {
 opacity： 
} 
  

（看起来像SILLY）

适用于IE10

I am trying to find an alternative for this:

"transition:background-image 1s whatever"

in firefox since it only works on webkit browsers.

I already tried the opacity alternative but thats not an option for me since i have content on the background container which will disappear along with the background if using opacity.

Thank you.

解决方案

You can do that using 2 pseudo elements

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

(hover to transition)

To be able to see the div content, the pseudo elements need to be in negative z-index:

fiddle with corrected z-index

looks like IE won't trigger this hover

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

but will trigger this one

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

(As SILLY as it seems)

fiddle for IE10

这篇关于在firefox的背景图像的过渡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！