Question

我想制作图片幻灯片。

我正在使用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/

我的问题是..有没有办法只过渡图像淡化，而不是调整大小？

Answer 1

您可以使用fadeOut（）函数摆脱CSS转换属性并使用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 Demo

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

1 个答案: