用动画删除背景图像

Question

我有一个带有background-image的div 。 单击一个按钮时，该图像需要淡出（并在按下另一个按钮时再次淡入）。 因此，只有background-image应该褪色，而不是内容褪色。

我怎样才能达到这种效果？ 我已经尝试过jQuery的animate() ，但这似乎不起作用。 我也无法使CSS过渡正常工作，而且opacity似乎也使所有内容透明。

小提琴

Answer 1

我认为您能够淡出背景图片的唯一方法是将其放在单独的div中并淡入淡出：

 $('.fade').on('click', function() { $('.background').fadeToggle(); }); 

 .container { position: relative; } .background { position: absolute; z-index: -1; top: 0; left: 0; bottom: 0; right: 0; background: url(http://lorempixel.com/800/800/city/1/) left top no-repeat; background-size: cover; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="background"></div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id diam ac dolor gravida ultricies. Sed pretium, orci at pharetra placerat, velit mauris posuere mauris, et ornare libero ligula tristique enim. Etiam vitae lobortis erat, ut volutpat ipsum. Suspendisse potenti. </div> <div class="fade">fade toggle</div> 

更新资料

您可以使用过于淡化为透明png的CSS过渡：

 $('.background').click(function() { $(this).toggleClass('blank') }) 

 .background { width: 400px; height: 400px; background: url(http://lorempixel.com/400/400/city/1/) left top no-repeat; transition: background-image 0.5s; } .background.blank { background: url(http://i.imgur.com/qkeOXbO.png) left top no-repeat; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="background"> </div> 

Answer 2

因此，我将创建一个新的div来保存您的背景图片。 然后在元素上应用淡入淡出。

我创建了一个小提琴供您查看https://jsfiddle.net/bx0dt60a/

下方的JS片段

 $('#fadeOut').click(function(){ $('#background').fadeOut(500); }); $('#fadeIn').click(function(){ $('#background').fadeIn(500); }); 

 .container { width: 500px; height: 500px; background-color: red; } .background { width: 100%; height: 100%; background-image: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id"container" class="container"> <div id="background" class="background"></div> </div> <div id="fadeOut"> fade out </div> <div id="fadeIn"> fade in </div>