0

如何使这种转换在所有浏览器中都有效？尽管我将这些值应用于所有浏览器，但它仅在 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 效果不适用于图像...悬停只是过渡没有生效。

4

1 回答 1

2

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

演示

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; }
于 2013-03-14T23:57:30.737 回答