背景图像 url 的 CSS 转换失败

Posted 2023-03-06

【中文标题】背景图像 url 的 CSS 转换失败

【英文标题】：CSS transition fails for background-image url

【发布时间】：2015-04-11 01:55:28

【问题描述】：

在Fade Effect on Link Hover? 上找到的以下示例

我做了这个：http://jsfiddle.net/felipelalli/ns9d1vug/

<div class="fade"/>

.fade 
-o-transition: 0.3s;
-moz-transition: 0.3s;
-khtml-transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;

 width:128px;height:128px;
background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png')


.fade:hover 
color: #b50000;
    width:128px;height:128px;
 background:url('http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png')

为什么它在 Chrome 中运行良好，但在 Firefox 中运行良好？

【问题讨论】：

bugzilla.mozilla.org/show_bug.cgi?id=546052

【参考方案1】：

它在 FF 中不起作用，因为 Firefox 不支持转换背景图像，只支持背景颜色。 如果要过渡背景图片，请使用两个单独的<div>：

.fade div 
-o-transition: 0.3s;
-moz-transition: 0.3s;
-khtml-transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
 width:128px;
  height:128px;
  position:absolute;
  top:0;
  left:0;

.fade
  position:relative;
  width:128px;
  height:128px;
  
.backone
  z-index:1;
  background:url('http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png');
  
.backtwo
background:url('http://upload.wikimedia.org/wikipedia/commons/b/b2/Crystal_128_babelfish.png');
  opacity:0;
z-index:5;

.fade:hover .backtwo
opacity:1;

.fade:hover .backone
opacity:0;

<div class="fade">
<div class="backone"></div>
<div class="backtwo"></div>
</div>

【参考方案2】：

您应该使用两个不同的元素，并在它们之间淡入淡出，而不是更改一个元素的背景图像。

这家伙做了一个例子： http://css3.bradshawenterprises.com/cfimg/

我不认为你应该能够做到这一点，但显然 Chrome 只是对你很好...... :-)