【问题标题】：CSS3 background image transitionCSS3背景图片过渡
【发布时间】：2018-02-25 18:52:47
【问题描述】：

我正在尝试使用 CSS 过渡制作“淡入淡出”效果。但我无法让它与背景图片一起使用......

CSS：

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    background: transparent;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

.title a:hover {
    background: transparent;
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    /* TRANSITION */
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

看一看：http://jsfiddle.net/AK3La/

【问题讨论】：

标签： css background background-image css-transitions

【解决方案1】：

您可以转换background-image。在 img 元素上使用下面的 CSS：

-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;

Chrome、Opera 和 Safari 原生支持此功能。 Firefox 尚未实现它 (bugzil.la)。不确定 IE。

【讨论】：

background-image 不是动画属性 (w3.org/TR/css3-transitions/#animatable-properties)，因此您的解决方案不符合标准。
这不是一个解决方案 - FF 和 IE 不支持它，如上所述，它不是规范所说的应该支持的属性。
另请参阅 Fx 的当前开发：bugzilla.mozilla.org/show_bug.cgi?id=546052
@TLindig 它应该是一个动画属性。
动画属性是background，这是应该使用的（它适用于我的Chrome）。自问题发布以来，规范（或 impl）可能发生了变化

【解决方案2】：

解决方案（我自己找到的）是一个忍者技巧，我可以为您提供两种方法：

首先你需要为<img>创建一个“容器”，它会同时包含正常和悬停状态：

<div class="images-container">
    <img src="http://lorempixel.com/400/200/animals/9/">
    <img src="http://lorempixel.com/400/200/animals/10/">
</div>

带有 CSS3 选择器http://jsfiddle.net/eD2zL/1/（如果您使用这个，“正常”状态将是您的容器的第一个子容器，或者更改nth-child() 顺序）
CSS2 解决方案http://jsfiddle.net/eD2zL/2/（区别只是几个选择器）

基本上，您需要隐藏“正常”状态并在您悬停时显示它们的“悬停”

就是这样，我希望有人觉得它有用。

【讨论】：

不错的解决方案。在尝试第一个示例时，我注意到如果将过渡持续时间增加到 4 秒，当 z-index 在过渡中间切换时，您会看到非常明显的跳跃。至少在 Chrome 35 上，您可以通过将属性值更改为“all 4s ease, z-index 1ms”（jsfiddle.net/eD2zL/330）来改变 z-index 开关的时间并清理过渡。
@NealS。你说得对。虽然这个答案已有 2 年历史，但我会删除 z-index，这似乎没有必要。图片只需要按顺序排列即可。
非常感谢。您的解决方案对我很有帮助。
如果我使用此解决方案，是否可能“延迟加载”？
我使用弹性网格更新了这个解决方案，没有 z-index 跳转：jsfiddle.net/khsejL5p

【解决方案3】：

我找到了适合我的解决方案...

如果您有一个仅包含链接的列表项（或 div），并且假设这是您页面上与 facebook、twitter 等的社交链接。并且您正在使用精灵图像，您可以这样做：

<li id="facebook"><a href="facebook.com"></a></li>

让“li”的背景成为你的按钮图片

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}

然后将链接的背景图片设为按钮的悬停状态。还要为此添加不透明度属性并将其设置为 0。

#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
}

现在您只需要“a:hover”下的“不透明度”并将其设置为 1。

#facebook a:hover {
   opacity:1;
}

将每个浏览器的不透明度转换属性添加到“a”和“a:hover”，这样最终的 css 将如下所示：

#facebook {
   width:30px;
   height:30px;
   background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
   display:inline-block;
   background:url(images/social) no-repeat 0px -30px;
   opacity:0;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}
#facebook a:hover {
   opacity:1;
   -webkit-transition: opacity 200ms linear;
   -moz-transition: opacity 200ms linear;
   -o-transition: opacity 200ms linear;
   -ms-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

如果我解释正确应该让你有一个褪色的背景图像按钮，希望它至少有帮助！

【讨论】：

我还做了一个视频教程版。 youtube.com/watch?v=6ieR5ApVpr0
你不应该，AFAIK，需要在悬停伪类上指定转换；锚标记类型的过渡定义将延续到悬停行为，您需要更改的只是不透明度。请记住，此示例运行良好，因为样式直接应用于 ID/标签类型；如果您对类执行此操作，则必须确保没有添加和删除定义了转换的类。

【解决方案4】：

很遗憾，您不能在 background-image 上使用过渡，请参阅 w3c list of animatable properties。

您可能想用background-position 做一些技巧。

【讨论】：

【解决方案5】：

你可以像我在Fiddle中那样使用伪元素来获得你想要的效果。

CSS：

.title a {
    display: block;
    width: 340px;
    height: 338px;
    color: black;
    position: relative;
}
.title a:after {
    background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
    content: "";
    opacity: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    /* TRANSISITION */
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{   
    opacity: 1;
}

HTML：

<div class="title">
    <a href="#">HYPERLINK</a>
</div>

【讨论】：

这很好用，但您可能会遇到 2 个问题：1) 如果您没有看到 :after 元素，请尝试将 width 和 height 设置为 100% 而不是 @ 987654328@, 2) 如果background-image 实际显示在foreground 中，则为:after 元素使用负索引：z-index: -1;

【解决方案6】：

如果你会使用jQuery，你可以试试BgSwitcher插件来切换背景图片和效果，非常好用。

例如：

$('.bgSwitch').bgswitcher({
        images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
        effect: "fade",
        interval: 10000
});

并添加自己的效果，见adding an effect types

【讨论】：

谢谢，我已经通过使用这个插件解决了表格背景更改动画的问题。

【解决方案7】：

试试这个，将使背景动画在网络上工作，但混合移动应用程序不工作

@-webkit-keyframes breath {
 0%   {  background-size: 110% auto; }
 50%  {  background-size: 140% auto; }
 100% {  background-size: 110% auto; }      
}
body {
   -webkit-animation: breath 15s linear infinite;
   background-image: url(images/login.png);
    background-size: cover;
}

【讨论】：

【解决方案8】：

考虑到背景图片不能动画化，我创建了一个小 SCSS mixin，允许使用伪选择器 before 和 after 在 2 个不同的背景图像之间进行转换。它们位于不同的 z-index 层。前面的那个以不透明度 0 开始，通过悬停变得可见。

您也可以使用相同的方法创建具有线性渐变的动画。

scss

@mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){  
  position: relative;  
  z-index: 100; 
  &:before, &:after {
    background-size: cover;  
    content: '';    
    display: block;
    height: 100%;
    position: absolute;
    top: 0; left: 0;    
    width: 100%;    
    transition: opacity $transTime;
  }
  &:before {    
    z-index: -101;
    background-image: url("#{$bkg1}");    
  }
  &:after {    
    z-index: -100;
    opacity: 0;
    background-image: url("#{$bkg2}");    
  }
  &:hover {
     &:after{
       opacity: 1; 
     }
  }  
}

现在你可以简单地使用它

@include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");

您可以在这里查看： https://jsfiddle.net/pablosgpacheco/01rmg0qL/

【讨论】：

非常好的解决方案！让我更好地了解如何充分利用元素状态 ':before' 和 ':after' 作为奖励:-)

【解决方案9】：

如果动画opacity 不是一个选项，您也可以动画background-size。

例如，我使用这个 CSS 设置了 backgound-image 的延迟。

.before {
  background-size: 0;
}

.after {
  transition: background 0.1s step-end;
  background-image: $path-to-image;
  background-size: 20px 20px;
}

【讨论】：

如果您希望背景图像从.after 变为.before 的淡出效果，则必须将背景图像设置为.before。否则它会在没有动画的情况下消失。

【解决方案10】：

Salam，此答案仅适用于 Chrome，因为 IE 和 FF 支持颜色转换。

没有必要将您的 HTML 元素设为opacity:0，因为有时它们包含文本，并且无需将您的元素加倍！。

链接到 jsfiddle 中的示例的问题需要做一个小改动，即在 .title a 中放置一个空图像，就像在 background:url(link to an empty image); 中一样，但将其设为空图像，以及代码会工作的。

.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
  }
  .title a:hover{   background: transparent;
   background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}

看看这个https://jsfiddle.net/Tobasi/vv8q9hum/

【讨论】：

仍然无法在火狐或 IE 上工作 :(，但在 chrome 中看起来不错

【解决方案11】：

这里有 Chris 鼓舞人心的帖子：

https://css-tricks.com/different-transitions-for-hover-on-hover-off/

我想出了这个：

#banner
{
    display:block;
    width:100%;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-image:url(../images/image1.jpg);
    /* HOVER OFF */
    @include transition(background-image 0.5s ease-in-out); 

    &:hover
    {
        background-image:url(../images/image2.jpg);
        /* HOVER ON */
        @include transition(background-image 0.5s ease-in-out); 
    }
}

【讨论】：

【解决方案12】：

这可以通过使用伪元素来实现比接受的答案更大的跨浏览器支持，如以下答案所示：https://stackoverflow.com/a/19818268/2602816

【讨论】：

【解决方案13】：

我为此苦苦挣扎了一会儿，我首先使用了一堆图像，每三秒一次，我试图动画到堆栈中的下一个图像并将当前图像扔到底部堆栈。同时，我正在使用如上所示的动画。我无法让它为我的生活工作。

您可以使用这个库，它允许使用 jquery-backstretch **动态调整大小、支持幻灯片放映的背景图像**。

https://github.com/jquery-backstretch/jquery-backstretch

【讨论】：