demo

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; }

CSS3过渡仅适用于Chrome

1 个答案:

demo