如何在所有瀏覽器中進行此轉換工作？它僅在Chrome中運行，儘管我已將這些值應用於所有瀏覽器。（我也嘗試過在其他計算機上，但我得到了相同的結果）：僅在Chrome中使用CSS3轉換

.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的效果不適用於圖像...懸停的作用只是過渡不生效。

2013-03-14 Alex Timuş

使用JavaScript。 – 2013-03-14 22:59:42

1）僅將過渡應用於「背景圖像」。 'transition：background-image .2s linear;'2）「不工作」並不能告訴我們多少，如果有的話。問題具體是什麼？ – Shmiddty 2013-03-14 23:01:05

我知道Javascript會完成這項工作，但我更喜歡使用CSS3。無論如何，如果你知道一個簡單的方法來達到相同的效果，但在同一時間保持簡單隨時提供幫助:) – 2013-03-14 23:09:17

據我所知，現在只有在Chrome 18+，iOS6（也許其他WebKit瀏覽器？在Win 7上的Safari中無法使用）的情況下，淡入淡出的圖像才起作用。爲了模擬相同的效果，你可以做的是在絕對定位的子節點上設置第二個圖像（並且我說的是child而不是僞元素的原因是僞元素上的轉換在其他瀏覽器中還沒有工作，除了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; }

來源

2013-03-14 23:57:30 Ana

可選地，可以使用'：before'（或'：after'）替代圖像而不是單獨的HTML元素，結合使用'.titlu：hover：before'或' .titlu：hover'。 – 2013-03-15 00:06:30

如果在其他瀏覽器（除Firefox以外）上使用僞元素進行轉換，那將會很棒。 – Ana 2013-03-15 00:08:13

感謝您的解決方法 – 2013-03-15 12:37:52

僅在Chrome中使用CSS3轉換

回答

demo

相關問題