0

この移行をすべてのブラウザーで機能させるにはどうすればよいですか? すべてのブラウザーで機能するように値を適用したにもかかわらず、Chrome でのみ機能します。(他のPCでも試してみましたが同じ結果でした):

.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 では機能しません...)。同じ効果をエミュレートするためにできることは、絶対配置された子に 2 番目の画像を設定することです (そして、疑似要素ではなく子と言っている理由は、疑似要素の遷移が他のブラウザーではまだ機能しないためです) Firefox) は、親と同じスペースを占有し、そのopacity子の01

デモ

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 に答える