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

【问题标题】：Trouble adding css transformation to background images无法将 css 转换添加到背景图像
【发布时间】：2017-12-14 12:18:58
【问题描述】：

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

【问题讨论】：

标签： html css css-transitions

【解决方案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; }

这需要更多的工作，但您必须按照这些思路做一些事情，以便在不同位置交叉淡入淡出不同的背景图像，而不会获得幻灯片效果。

【讨论】：