html - 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)占据与父级相同的空间，并在鼠标悬停在父级上时将该子级的不透明度从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; }