CSS 过渡背景图像淡入，但不动画大小

CSS Transition background image to fade in but not animate size

本文关键字：动画 淡入 背景 图像 CSS      更新时间：2023-09-26

我想制作一个图像幻灯片。

我正在使用CSS使其在一张图像到另一张图像之间平滑过渡，但这不仅使淡入过渡动画化，而且使图像大小动画化。

我目前的 CSS：

 .slideshow{
    width:100%; 
    height:100%; 
    background-size:cover; 
    background-repeat: no-repeat; 
    background-position: center;  
    transition: background-image 5s;
    overflow:hidden;
 }

这把小提琴准确地说明了问题所在：https://jsfiddle.net/raphadko/gchey1tL/

我的问题是..有没有办法只转换图像褪色，而不是调整大小？

你可以去掉 CSS transition 属性，并使用 fadeOut（） 函数使用 jQuery 执行此操作：

$('#changeSlide').on('click', function() {
  $('.slideshow').fadeOut('500', function() {
    $(this).css('background-image', "url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-210147.jpg')").fadeIn('500');
  });
})
.slideshow {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  background-image: url('https://s-media-cache-ak0.pinimg.com/236x/8c/e5/7a/8ce57a18e94e9f5fdc29865c7d927d6c.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="overflow:hidden; width:300px; height:300px">
  <div class="slideshow"></div>
</div>
<button id='changeSlide'>Change Slide</button>
It not only fades but it resizes too.. I want it to fade to the image already sized up to fit the slideshow div

jsFiddle 演示

相关文章：