添加css轉換到背景圖片時遇到問題

我正在創建一個簡單的網頁，並且在背景圖片更改時向css添加淡入淡出動畫時遇到問題。我知道我需要使用這些方針的東西，但每當我嘗試它，它似乎並沒有工作...添加css轉換到背景圖片時遇到問題

-webkit-transition: background 1s ease-in-out; 
-moz-transition: background 1s ease-in-out; 
-o-transition: background 1s ease-in-out; 
-ms-transition: background 1s ease-in-out; 
transition: background 1s ease-in-out;

我把一個鏈接到我的CSS和HTML下方，如果任何人都可以採取一看，我將非常感激:)

CSS：http://pastebin.com/9k1tSiAE HTML：http://pastebin.com/2K7GFWjN

來源

2012-02-12 james

的問題是要更改的背景圖像中除了簡單的背景本身更改屬性。我已經設置了一些隨機背景圖塊的小提琴。你會看到背景的幻燈片，但立即在圖像上的更改，而過渡：

http://jsfiddle.net/jimjeffers/a2jAF/

你需要一個圖像上定居的背景，但現在你有三個：

background-image:url(nav-bg-initial.png); 
background-image:url(nav-bg-secondry.png); 
background-image:url(nav-bg-tertiary.png);

你需要將這些壓縮成一個精靈。但是，一旦應用到背景的過渡並調整背景位置，背景就會滑動而不是淡化。因此，取決於您要實現的效果 - 轉換背景可能不是您的最佳選擇。

取而代之 - 您可能需要做的是使用一些嵌套的空容器元素。它在語義上不是很好，但如果你想使用CSS轉換來執行淡入淡出，它可以達到你想要的。

<ul id="navigation-list"> 
    <li><a class="navigation-button" id="nav-button-1" href="#">HOME</a><span class="initial"></span><span class="secondary"></span><span class="tertiary"></span></li> 
    ... 
</ul>

的CSS則是：

.navigation-button { position: relative; } 
.initial, .secondary, .tertiary { 
    bottom: 0; 
    left: 0; 
    opacity: 0; 
    position: absolute 
    right: 0; 
    top: 0; 
    -webkit-transition: opacity 1s ease-in-out; 
     -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
    z-index: -1; 
} 

.initial { background-image:url(nav-bg-initial.png); } 
.secondary { background-image:url(nav-bg-secondry.png); z-index: -2; } 
.tertiary { background-image:url(nav-bg-tertiary.png); z-index: -3; }

然後你切換他們的外表是這樣的：

#navigation-buttons:hover #nav-button-1 .tertiary { opacity: 1; }

這是一個有點更多的工作，但你必須做沿着這些線交叉淡入淡出不同的背景圖像在各個位置沒有得到幻燈片效果。

來源

2012-02-13 05:03:42

添加css轉換到背景圖片時遇到問題

回答

相關問題