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

问题描述：

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

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

我不记得'背景'过渡在Chrome上做！效果实际上很整齐。无论如何，现在似乎是Chrome中的默认行为，所以......也许你必须使用''并用JS更改它们的'src'。 – Aziz

答

可以摆脱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过渡背景图像淡入但不动画大小

相关推荐