CSS3 过渡仅适用于 Chrome

Question

如何使这种转换在所有浏览器中都能正常工作？尽管我将这些值应用于所有浏览器，但它仅在 Chrome 中起作用。 （我也在其他电脑上试过，结果一样）：

.titlu 
{ 
    background:url(images/titlu.png); 
    background-repeat: no-repeat;
    width:716px; 
    height: 237px; 
    display: block; 
    position: absolute; 
    top:460px; 
    right: 255px; 
    z-index: 5;
    -webkit-transition: background 0.20s linear;
    -moz-transition: background 0.20s linear;
    -o-transition: background 0.20s linear;
    transition: background 0.20s linear;
}

.titlu:hover 
{
    width:716px; 
    height: 237px;
    display: block; 
    z-index: 5; 
    background-repeat: no-repeat;
    background-image:url(images/titlu2.png);
}

我被要求更详细地说明问题...我所说的不工作的意思是 webkit 效果不适用于图像...悬停工作只是过渡没有生效。

Answer 1

据我所知，交叉淡入淡出的图像目前仅适用于 Chrome 18+、iOS6（可能是其他 WebKit 浏览器？但在 Win 7 上的 Safari 中不起作用......）。为了模拟相同的效果，您可以做的是在绝对定位的子元素上设置第二个图像（我说子元素而不是伪元素的原因是伪元素上的转换在其他浏览器中还不起作用，除了Firefox），它与父级占用相同的空间，并在将鼠标悬停在父级上时将该子级的 opacity 从 0 更改为 1。

demo

HTML：

<h1 class='titlu'>
  <div class='secondary-bg'></div>
</h1>

CSS：

.titlu { 
  position: absolute;
  background: url(http://imgsrc.hubblesite.org/hu/db/images/hs-2013-06-a-web.jpg) 
              no-repeat; 
  background-size: 100% 100%;
  width: 16em; 
  height: 10em; 
}
.secondary-bg {
  position: absolute;
  width: inherit; height: inherit;
  opacity: 0;
  background: inherit;
  background-image: 
    url(http://imgsrc.hubblesite.org/hu/db/images/hs-2010-13-a-web.jpg);
  transition: opacity 2s linear;
}
.titlu:hover .secondary-bg { opacity: 1; }