Question

我正在创建一个简单的网页，但在更改背景图片时，我无法在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

Answer 1

问题是除了简单地更改背景本身的属性之外，您还在更改背景图像。我已经设置了一些随机背景瓷砖。您将看到背景幻灯片，但图像会立即更改而不进行转换：

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

这是一项更多的工作，但你必须沿着这些线做一些事情，以交叉淡化不同位置的不同背景图像，而不会产生幻灯片效果。

无法将css转换添加到背景图像

1 个答案: